:root {
  --bg: #06111a;
  --panel: #0a151eec;
  --gold: #d99332;
  --gold2: #f0a534;
  --text: #f2f0ea;
  --muted: #b8bcc0;
  --line: #29343a
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: radial-gradient(circle at 55% 20%, #132838 0, #06111a 48%, #030b12 100%);
  color: var(--text);
  font: 14px/1.5 Arial, sans-serif;
  min-height: 100vh
}

a {
  color: inherit;
  text-decoration: none
}

button {
  font: inherit;
  color: inherit
}

.topbar {
  height: 72px;
  background: #030c13f5;
  border-bottom: 1px solid #202b31;
  display: flex;
  align-items: center;
  padding: 0 3%;
  position: relative;
  z-index: 5
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e6a04b;
  font: 26px/1 Georgia, serif;
  letter-spacing: 4px;
  width: 270px
}

.brand small {
  display: block;
  font-size: 11px;
  letter-spacing: 5px;
  margin-top: 5px
}

.crest {
  width: 46px;
  height: 53px;
  border: 3px solid #e49b41;
  clip-path: polygon(50% 0, 100% 18%, 94% 72%, 50% 100%, 6% 72%, 0 18%);
  display: grid;
  place-items: center;
  font-size: 15px;
  letter-spacing: -1px
}

.main-nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1
}

.main-nav a {
  height: 100%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 12px;
  position: relative
}

.main-nav i {
  font-style: normal;
  font-size: 18px;
  margin-left: 7px
}

.main-nav a:hover, .main-nav .active {
  color: var(--gold2)
}

.main-nav .active:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold2)
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 20px
}

.header-discord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px 0 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(143 154 255 / 55%);
  border-radius: 999px;
  color: #e4e7ff;
  background: linear-gradient(135deg, rgb(88 101 242 / 34%), rgb(47 55 151 / 25%));
  box-shadow: 0 5px 18px rgb(40 48 170 / 20%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.header-discord::after {
  content: "";
  width: 34px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -45px;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 14%), transparent);
  transform: skewX(-20deg);
  transition: left .35s ease;
}

.header-discord__icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #5865f2;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 0 12px rgb(88 101 242 / 55%);
}

.header-discord:hover,
.header-discord:focus-visible {
  border-color: #aeb6ff;
  color: #fff;
  background: linear-gradient(135deg, rgb(88 101 242 / 55%), rgb(47 55 151 / 40%));
  box-shadow: 0 7px 22px rgb(40 48 170 / 34%);
  outline: none;
  transform: translateY(-1px);
}

.header-discord:hover::after,
.header-discord:focus-visible::after {
  left: calc(100% + 10px);
}

.header-tools button, .menu-toggle {
  border: 0;
  background: transparent
}

.search {
  width: 25px;
  height: 25px;
  position: relative
}

.search:before {
  content: "";
  position: absolute;
  border: 2px solid white;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  left: 0;
  top: 0
}

.search:after {
  content: "";
  position: absolute;
  width: 9px;
  height: 2px;
  background: white;
  transform: rotate(48deg);
  right: 1px;
  bottom: 5px
}

.profile {
  border: 1px solid white !important;
  width: 30px;
  height: 30px;
  border-radius: 50% !important;
  font-size: 11px
}

.menu-toggle {
  display: none
}

.hero {
  height: 395px;
  background: linear-gradient(90deg, rgba(2, 11, 18, .65) 0, rgba(2, 11, 18, .22) 45%, rgba(2, 11, 18, .08)), linear-gradient(0deg, #07121b 0, transparent 30%), url(../assets/hero-fantasy.png) center 50%/cover no-repeat
}

.hero-inner {
  width: min(1515px, 88%);
  margin: auto;
  padding-top: 95px
}

.eyebrow {
  text-transform: uppercase;
  color: var(--gold2);
  font-size: 17px;
  letter-spacing: 2px;
  margin: 0 0 3px
}

.hero h1 {
  text-transform: uppercase;
  font: 700 65px/1.06 Georgia, serif;
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 3px 8px #000
}

.rune-line {
  display: flex;
  align-items: center;
  width: 115px;
  color: var(--gold2);
  margin: 8px 0
}

.rune-line span {
  height: 2px;
  background: var(--gold2);
  flex: 1
}

.rune-line b {
  margin: 0 6px
}

.intro {
  font: 20px/1.35 Georgia, serif;
  margin: 0 0 20px
}

.hero-actions {
  display: flex;
  gap: 16px
}

.button {
  min-width: 238px;
  padding: 15px 26px;
  border: 1px solid #9b692c;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.button.primary {
  background: linear-gradient(135deg, #b97e32, #7c4d1c);
  border-color: #b97e32
}

.button.secondary {
  background: #06101acb
}

.button b {
  font-size: 23px
}

.page-shell {
  width: min(1515px, 88%);
  margin: -8px auto 18px;
  position: relative
}

.panel, .category-bar {
  border: 1px solid #303a3d;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 8px 20px #0004
}

.category-bar {
  height: 112px;
  display: grid;
  grid-template-columns:repeat(7, 1fr);
  padding: 14px 0;
  margin-bottom: 17px
}

.category-bar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #374044;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease
}

.category-bar a::after {
  position: absolute;
  right: 20%;
  bottom: 0;
  left: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  content: "";
  opacity: 0;
  transform: scaleX(.35);
  transition: opacity .18s ease, transform .18s ease;
}

.category-bar a:hover,
.category-bar a:focus-visible {
  color: #fff;
  background: linear-gradient(0deg, #d99a250e, transparent 75%);
  outline: none;
}

.category-bar a:hover::after,
.category-bar a:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.category-bar a:hover i,
.category-bar a:focus-visible i {
  color: var(--gold2);
  transform: translateY(-2px);
}

.category-bar a:last-child {
  border: 0
}

.category-bar i {
  color: var(--gold);
  font: 30px/1 Georgia;
  margin-bottom: 7px;
  transition: color .18s ease, transform .18s ease
}

.category-bar b {
  text-transform: uppercase;
  font-size: 11px
}

.category-bar span {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px
}

.content-grid {
  display: grid;
  grid-template-columns:minmax(0, 3fr) minmax(340px, 1.05fr);
  gap: 24px
}

.panel {
  padding: 15px 17px
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #27343b;
  margin-bottom: 10px
}

.section-head h2 {
  font: 17px/1.2 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
  padding-bottom: 10px;
  position: relative
}

.section-head h2:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 39px;
  height: 2px;
  background: var(--gold2)
}

.section-head a {
  font-size: 10px;
  color: var(--gold2);
  text-transform: uppercase
}

.section-head a b {
  font-size: 17px;
  margin-left: 8px
}

.guide-grid {
  display: grid;
  grid-template-columns:repeat(4, 1fr);
  gap: 13px
}

.guide-card {
  border: 1px solid #303a3d;
  border-radius: 8px;
  overflow: hidden;
  background: #0a151d;
  min-width: 0
}

.card-art {
  height: 125px;
  background: linear-gradient(20deg, #08101933, #0000), url(../assets/hero-fantasy.png) center/cover;
  position: relative
}

.card-art.forest {
  filter: hue-rotate(55deg)
}

.card-art.dungeon {
  background-position: 62% 45%
}

.card-art.forge {
  background-position: 52% 67%;
  filter: saturate(.6)
}

.card-art.pvp {
  background-position: 80% 45%;
  filter: hue-rotate(180deg)
}

.card-art span, .tag {
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: var(--gold2);
  border: 1px solid #a66c20;
  border-radius: 3px;
  background: #071019e8;
  padding: 3px 8px;
  text-transform: uppercase;
  font-size: 10px
}

.card-copy {
  padding: 11px 12px
}

.card-copy h3, .event h3, .news h3 {
  font: 15px/1.25 Georgia, serif;
  margin: 0 0 7px
}

.card-copy p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  min-height: 42px
}

.card-copy a {
  display: flex;
  justify-content: space-between;
  color: var(--gold2);
  font-size: 10px;
  text-transform: uppercase;
  margin-top: 9px
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 17px
}

.events {
  padding-bottom: 8px
}

.event {
  display: grid;
  grid-template-columns:51px 1fr 72px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #233039;
  padding: 7px 0
}

.event:last-child {
  border: 0
}

.event time {
  border-right: 1px solid #394147;
  color: var(--gold2);
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  font-family: Georgia, serif
}

.event time b {
  display: block;
  font-size: 24px;
  line-height: 1
}

.event h3 {
  font-size: 13px;
  margin-bottom: 5px
}

.event .tag {
  position: static;
  display: inline-block;
  font-size: 8px;
  padding: 2px 6px
}

.event small {
  text-align: right;
  color: var(--muted);
  font-size: 10px;
  line-height: 2
}

.news article {
  display: grid;
  grid-template-columns:82px 1fr;
  gap: 13px
}

.news-image {
  background: url(../assets/hero-fantasy.png) 68% center/cover;
  border-radius: 5px;
  min-height: 75px
}

.news h3 {
  font-size: 13px;
  margin-top: 3px
}

.news p {
  font-size: 10px;
  color: var(--muted);
  margin: 0
}

.news small {
  display: block;
  text-align: right;
  color: #888;
  margin-top: 4px
}

.menu-toggle {
  width: 38px
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 6px 0
}

@media (max-width: 1100px) {
  .main-nav {
    gap: 16px
  }

  .main-nav a {
    font-size: 10px
  }

  .brand {
    width: 220px
  }

  .content-grid {
    grid-template-columns:1fr
  }

  .sidebar {
    display: grid;
    grid-template-columns:1fr 1fr
  }

  .hero h1 {
    font-size: 55px
  }
}

@media (max-width: 780px) {
  .topbar {
    height: 64px;
    padding: 0 20px
  }

  .brand {
    font-size: 20px;
    flex: 1
  }

  .crest {
    height: 43px;
    width: 38px
  }

  .menu-toggle {
    display: block;
    order: 3
  }

  .header-tools {
    margin-right: 15px
  }

  .header-discord {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .header-discord__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    height: auto;
    background: #06111bf8;
    padding: 10px 25px;
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }

  .main-nav.open {
    display: flex
  }

  .main-nav a {
    padding: 13px 0
  }

  .main-nav .active:after {
    display: none
  }

  .hero {
    height: 455px;
    background-position: 62% center
  }

  .hero-inner {
    width: 90%;
    padding-top: 85px
  }

  .hero h1 {
    font-size: 43px
  }

  .intro {
    font-size: 17px
  }

  .hero-actions {
    flex-direction: column;
    width: 270px;
    gap: 10px
  }

  .button {
    padding: 12px 18px
  }

  .page-shell {
    width: 92%;
    margin-top: -20px
  }

  .category-bar {
    height: auto;
    grid-template-columns:repeat(2, 1fr);
    padding: 0
  }

  .category-bar a {
    padding: 17px 5px;
    border-bottom: 1px solid #374044
  }

  .category-bar a:nth-child(even) {
    border-right: 0
  }

  .guide-grid {
    grid-template-columns:repeat(2, 1fr)
  }

  .sidebar {
    grid-template-columns:1fr
  }
}

@media (max-width: 480px) {
  .header-tools {
    gap: 7px
  }

  .brand {
    letter-spacing: 2px
  }

  .brand small {
    letter-spacing: 3px
  }

  .hero h1 {
    font-size: 36px
  }

  .hero-inner {
    padding-top: 70px
  }

  .eyebrow {
    font-size: 14px
  }

  .category-bar {
    grid-template-columns:1fr 1fr
  }

  .category-bar span {
    display: none
  }

  .guide-grid {
    grid-template-columns:1fr
  }

  .card-art {
    height: 155px
  }

  .panel {
    padding: 13px
  }

  .event {
    grid-template-columns:44px 1fr
  }

  .event small {
    display: none
  }

  .section-head a {
    font-size: 8px
  }
}

/* Compact eight-card Guides View on the front page. */
.front-guides-block {
  width: 100%;
  padding: 15px 17px 20px;
}

.front-guides-block__head {
  margin-bottom: 10px;
}

.front-guides-block__head h2 {
  font-size: 17px;
}

.front-guides-block__head > a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--gold2);
}

.front-guides-block__head > a b {
  font-size: 18px;
  line-height: 1;
}

.front-guides-block__content {
  min-width: 0;
}

.front-guide-grid__item {
  min-width: 0;
}

.front-guide-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.front-guide-grid__item .guide-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.front-guide-grid__item .guide-card:hover {
  border-color: #725128;
  box-shadow: 0 9px 22px #0006;
  transform: translateY(-2px);
}

.guide-card--dynamic .card-art {
  display: block;
  overflow: hidden;
  background: #07121a;
}

.guide-card--dynamic .card-art img,
.guide-card--dynamic .guide-card__placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .3s ease;
}

.guide-card--dynamic .guide-card__placeholder {
  background: linear-gradient(135deg, #102838, #07121a);
}

.guide-card--dynamic:hover .card-art img {
  transform: scale(1.04);
}

.guide-card--dynamic .card-copy {
  min-height: 113px;
  padding: 11px 12px 12px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.guide-card--dynamic .card-copy h3 {
  margin-bottom: 7px;
  font-size: 15px;
}

.guide-card--dynamic .card-copy h3 a {
  color: var(--text);
  text-transform: none;
  font-size: 15px;
}

.guide-card--dynamic .card-copy h3 a:hover,
.guide-card--dynamic .card-copy h3 a:focus-visible {
  color: var(--gold2);
}

.guide-card--dynamic .card-copy p {
  min-height: 0;
  margin-bottom: 8px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.guide-card--dynamic .guide-card__more {
  margin-top: auto;
  padding-top: 9px;
  border-top: 0;
}

@media (max-width: 1100px) {
  .front-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .front-guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-card--dynamic .card-art {
    height: 190px;
  }
}

/* Header account menu. */
.profile {
  padding: 0;
  overflow: hidden;
  background: #09151e;
}

.profile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile--fallback span {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.profile--fallback span::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 5px;
  left: 9px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.profile--fallback span::after {
  content: "";
  width: 15px;
  height: 8px;
  position: absolute;
  right: 5px;
  bottom: 4px;
  border: 1.5px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.account-menu {
  position: relative;
}

/* Search dialog. */
.search-dialog {
  width: min(680px, calc(100% - 32px));
  max-width: none;
  margin: min(18vh, 150px) auto auto;
  padding: 0;
  overflow: visible;
  border: 1px solid #465158;
  border-radius: 10px;
  color: var(--text);
  background: linear-gradient(145deg, #101d26fc, #07121bfc);
  box-shadow: 0 24px 70px #000c;
}

.search-dialog::backdrop {
  background: #020910d9;
  backdrop-filter: blur(4px);
}

.search-dialog__form {
  padding: 24px;
}

.search-dialog__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.search-dialog__heading small {
  color: var(--gold2);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.search-dialog__heading h2 {
  margin: 3px 0 0;
  font: 23px Georgia, serif;
  text-transform: uppercase;
}

.search-dialog__close {
  width: 34px;
  height: 34px;
  border: 1px solid #3c474e;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.search-dialog__close:hover, .search-dialog__close:focus-visible {
  color: var(--gold2);
  border-color: var(--gold2);
}

.search-dialog__input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid #3b474e;
  border-radius: 6px;
  overflow: hidden;
  background: #06111a;
}

.search-dialog__input:focus-within {
  border-color: var(--gold2);
  box-shadow: 0 0 0 1px var(--gold2);
}

.search-dialog__input input {
  min-width: 0;
  height: 52px;
  padding: 0 16px;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 15px;
}

.search-dialog__input button {
  padding: 0 24px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #b97e32, #7c4d1c);
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 560px) {
  .search-dialog {
    width: calc(100% - 20px);
    margin-top: 76px;
  }

  .search-dialog__form {
    padding: 18px;
  }

  .search-dialog__heading h2 {
    font-size: 19px;
  }

  .search-dialog__input {
    grid-template-columns: 1fr;
  }

  .search-dialog__input button {
    min-height: 44px;
  }
}

.account-menu > summary {
  display: grid;
  place-items: center;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu[open] > summary,
.account-menu > summary:hover,
.account-menu > summary:focus-visible {
  color: var(--gold2);
  border-color: var(--gold2) !important;
}

.account-menu__panel {
  width: 245px;
  padding: 10px;
  position: absolute;
  z-index: 50;
  top: calc(100% + 14px);
  right: 0;
  border: 1px solid #384248;
  border-radius: 7px;
  background: linear-gradient(145deg, #101d26fc, #07121bfc);
  box-shadow: 0 18px 40px #000a;
}

.account-menu__panel::before {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  top: -6px;
  right: 10px;
  border-top: 1px solid #384248;
  border-left: 1px solid #384248;
  background: #0e1b24;
  transform: rotate(45deg);
}

.account-menu__title,
.account-menu__name {
  display: block;
  padding: 8px 10px 11px;
  border-bottom: 1px solid #29343a;
  color: var(--gold2);
  font: 13px Georgia, serif;
}

.account-menu__name small,
.account-menu__name strong {
  display: block;
}

.account-menu__name small {
  margin-bottom: 3px;
  color: var(--muted);
  font: 10px Arial, sans-serif;
  text-transform: uppercase;
}

.account-menu__panel a {
  display: block;
  padding: 10px;
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
}

.account-menu__panel a:hover,
.account-menu__panel a:focus-visible {
  color: var(--gold2);
  background: #ffffff0a;
}

.account-menu__panel .account-menu__logout {
  margin-top: 5px;
  border-top: 1px solid #29343a;
  border-radius: 0;
}

.account-menu__panel .account-menu__admin {
  margin-top: 5px;
  border-top: 1px solid #29343a;
  color: var(--gold2);
  font-weight: 700;
}

/* User account pages deliberately use no expansion sidebar. */
.user-layout {
  display: block;
}

.user-layout .sub-content {
  width: min(760px, calc(100% - 40px));
  margin: 45px auto;
  padding: 28px 32px 34px;
  border: 1px solid #303a3d;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 12px 35px #0005;
}

.user-layout input:not([type="checkbox"]):not([type="radio"]),
.user-layout select,
.user-layout textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid #3a464d;
  border-radius: 5px;
  background: #06111a;
  color: var(--text);
}

.user-layout input:focus,
.user-layout select:focus,
.user-layout textarea:focus {
  border-color: var(--gold2);
  outline: 1px solid var(--gold2);
}

.user-layout .form-submit {
  padding: 11px 22px;
  border: 1px solid #b97e32;
  border-radius: 5px;
  background: linear-gradient(135deg, #b97e32, #7c4d1c);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 780px) {
  .account-menu__panel {
    right: -45px;
  }

  .user-layout .sub-content {
    width: calc(100% - 24px);
    margin: 20px auto;
    padding: 22px 18px 26px;
  }
}

/* Consistent navigation chevrons instead of font glyphs */

/* Breadcrumb navigation. */
.breadcrumb {
  width: 100%;
  margin: 0 0 24px;
  padding: 0 0 12px;
  overflow-x: auto;
  border-bottom: 1px solid #28353c;
  scrollbar-width: thin;
}

.breadcrumb__list {
  min-width: max-content;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  list-style: none;
}

.breadcrumb__item {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  list-style: none;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 12px 0 10px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}

.breadcrumb__item:first-child a::before {
  content: "⌂";
  margin-right: 7px;
  color: var(--gold2);
  font-size: 14px;
  line-height: 1;
}

.breadcrumb__item a {
  color: #b9bec1;
  transition: color .18s ease;
}

.breadcrumb__item a:hover,
.breadcrumb__item a:focus-visible {
  color: var(--gold2);
}

.breadcrumb__item--current {
  color: var(--text);
  font-weight: 700;
}

.breadcrumb__item--current span {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 780px) {
  .breadcrumb {
    margin-bottom: 18px;
    padding-bottom: 10px;
  }

  .breadcrumb__item + .breadcrumb__item::before {
    margin-right: 9px;
    margin-left: 7px;
  }

  .breadcrumb__item--current span {
    max-width: 220px;
  }
}

.main-nav i {
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  font-size: 0;
  font-style: normal;
  transition: transform .2s ease;
}

/* Drupal menu region wrappers. */
.main-nav > div,
.main-nav .menu {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 30px;
}

.main-nav .menu-item {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 780px) {
  .main-nav > div,
  .main-nav .menu {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .main-nav .menu-item {
    height: auto;
  }
}

/* Drupal main_menu region -------------------------------------------------- */
.main-nav > .block,
.main-nav > .region,
.main-nav > .region > .block,
.main-nav > div > nav,
.main-nav > .block > .content,
.main-nav > .region > .block > .content {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
  min-width: 0;
}

.main-nav .block > h2,
.main-nav .contextual {
  display: none;
}

.main-nav ul.menu {
  display: flex;
  align-items: stretch;
  flex: 1;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 30px;
  list-style: none;
}

.main-nav ul.menu > li.menu-item {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}

.main-nav ul.menu > li.menu-item > a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2px;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  transition: color .18s ease;
}

.main-nav ul.menu > li.menu-item > a:hover,
.main-nav ul.menu > li.menu-item > a:focus-visible {
  color: var(--gold2);
}

.main-nav .menu-item--expanded > a::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  order: 2;
}

.main-nav ul.menu ul.menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  width: 520px;
  height: auto;
  padding: 8px;
  position: absolute;
  z-index: 30;
  top: calc(100% - 1px);
  left: -14px;
  border: 1px solid #384248;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(145deg, #101d26fa, #07121bfc);
  box-shadow: 0 18px 40px #000a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.main-nav li.menu-item:hover > ul.menu,
.main-nav li.menu-item:focus-within > ul.menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.main-nav ul.menu ul.menu .menu-item,
.main-nav ul.menu ul.menu a,
.main-nav ul.menu ul.menu .menu-entry {
  display: block;
  width: 100%;
  height: auto;
}

.main-nav ul.menu ul.menu .menu-entry {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 7px;
  border-radius: 4px;
}

.main-nav .menu-expansion-image {
  display: block;
  width: 82px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
}

.main-nav .menu-entry-copy {
  min-width: 0;
}

.main-nav ul.menu ul.menu .menu-entry:hover,
.main-nav ul.menu ul.menu .menu-entry:focus-within {
  background: #ffffff0a;
}

.main-nav ul.menu ul.menu a {
  padding: 11px 12px;
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  text-transform: none;
}

.main-nav ul.menu ul.menu .menu-entry a {
  padding: 0;
  font-family: Georgia, serif;
  font-size: 13px;
}

.main-nav .menu-addon-version {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.2;
}

/* Visually separated navigation for Secrets and other special Guides. */
.main-nav .menu-item--guides > .menu--level-1 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(175px, .8fr);
  width: min(760px, calc(100vw - 40px));
}

.main-nav .menu--level-1 > .menu-item--guide-specials {
  grid-column: 3;
  grid-row: 1 / span 20;
  display: block;
  margin: 0 0 0 5px;
  padding: 5px 7px 9px;
  border-radius: 6px;
  background: #d69a2310;
}

.main-nav .menu--level-1 > .menu-item--guide-specials > span,
.main-nav .menu--level-1 > .menu-item--guide-specials > a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  color: #d7a542;
  font: 700 11px/1.2 Georgia, serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.main-nav .menu--level-1 > .menu-item--guide-specials > span::before,
.main-nav .menu--level-1 > .menu-item--guide-specials > a::before {
  content: "✦";
  color: var(--gold2);
  font-size: 9px;
}

.main-nav .menu--level-1 > .menu-item--guide-specials > a::after,
.main-nav .menu--level-1 > .menu-item--guide-specials > a::before {
  transform: none;
}

.main-nav .menu--level-1 > .menu-item--guide-specials > .menu--level-2 {
  position: static;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: auto;
  padding: 0;
  gap: 7px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.main-nav .menu-item--guide-specials > .menu--level-2 > .menu-item {
  width: 100%;
}

.main-nav .menu-item--guide-specials > .menu--level-2 > .menu-item > a {
  padding: 8px 13px;
  font-size: 11px;
}

.main-nav .menu-item--guide-specials > .menu--level-2 > .menu-item > a:hover,
.main-nav .menu-item--guide-specials > .menu--level-2 > .menu-item > a:focus-visible {
  border-color: var(--gold2);
  color: #fff3d0;
  background: #3a2911;
}

@media (max-width: 780px) {
  .main-nav .menu-item--guides > .menu--level-1 {
    width: 100%;
  }

  .main-nav .menu--level-1 > .menu-item--guide-specials {
    display: block;
    grid-column: auto;
    grid-row: auto;
    margin: 0;
    padding: 9px 12px;
    border-left: 0;
  }

  .main-nav .menu--level-1 > .menu-item--guide-specials > .menu--level-2 {
    padding: 5px 0 8px 14px;
  }
}

/* Expansion taxonomy hero. */
.expansion-hero {
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  padding: 48px 6%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #04101ddd 0%, #04101d88 48%, #04101d33 75%),
  linear-gradient(0deg, #07131d 0%, transparent 65%),
  var(--expansion-hero-image) center center / cover no-repeat;
  border-bottom: 1px solid #29343a;
}

.expansion-hero__inner {
  width: min(1515px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.expansion-hero__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 4px 11px;
  border: 1px solid rgb(240 165 0 / 70%);
  border-radius: 999px;
  color: #ffd36f;
  background: rgb(20 15 5 / 78%);
  box-shadow: 0 4px 14px rgb(0 0 0 / 30%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.expansion-hero h1 {
  margin: 4px 0 0;
  font: 700 52px/1.05 Georgia, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 3px 12px #000;
}

.expansion-hero__version {
  display: inline-block;
  color: var(--gold2);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Dedicated expansion taxonomy pages. */
.is-expansion-page .expansion-hero {
  min-height: 410px;
  padding: 58px 6%;
}

.is-expansion-page .expansion-hero h1 {
  max-width: 900px;
  font-size: clamp(44px, 5vw, 72px);
}

.is-expansion-page .sub-content {
  padding-top: 34px;
}

.is-expansion-page .sub-content [id*="page-title"] {
  display: none;
}

.expansion-overview {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.expansion-overview__intro,
.expansion-overview__fields,
.expansion-content-region > div > .block,
.expansion-content-region > .block {
  padding: 25px 28px;
  border: 1px solid #303b42;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 10px 28px #0004;
}

.expansion-overview__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #2b373d;
}

.expansion-overview__eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--gold2);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.expansion-overview__heading h2 {
  margin: 0;
  font: 25px/1.1 Georgia, serif;
  text-transform: uppercase;
}

.expansion-overview__version {
  min-width: 110px;
  padding: 8px 12px;
  border: 1px solid #60451f;
  border-radius: 5px;
  background: #0a141dcc;
  text-align: right;
}

.expansion-overview__version small,
.expansion-overview__version strong {
  display: block;
}

.expansion-overview__version small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.expansion-overview__version strong {
  color: var(--gold2);
  font: 17px Georgia, serif;
}

.expansion-overview__description {
  max-width: 850px;
  margin: 18px 0 0;
  color: #c8ccce;
  font: 16px/1.7 Georgia, serif;
}

.expansion-overview__description p {
  margin: 0 0 10px;
}

.expansion-overview__fields {
  margin-top: 20px;
}

.expansion-content-region {
  width: min(1180px, 100%);
  margin: 24px auto 0;
}

.expansion-content-region > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.expansion-content-region h2 {
  margin: 0 0 15px;
  padding-bottom: 11px;
  border-bottom: 1px solid #2b373d;
  color: var(--text);
  font: 18px Georgia, serif;
  text-transform: uppercase;
}

/* The Views display "expansions" owns the expansion page content. */
.expansion-view {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.expansion-view__header {
  margin-bottom: 24px;
  padding: 24px 28px;
  border: 1px solid #303b42;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 10px 28px #0004;
}

.expansion-view__header .expansion-term-context {
  color: #c8ccce;
  font: 16px/1.7 Georgia, serif;
}

.expansion-view__header .field--name-field-addon-version {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 5px 10px;
  border: 1px solid #60451f;
  border-radius: 4px;
  color: var(--gold2);
  background: #0a141dcc;
  font-size: 12px;
}

.expansion-view__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.expansion-view__card {
  height: 230px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #344047;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921, #07121a);
  box-shadow: 0 10px 25px #0004;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.expansion-view__card:hover {
  border-color: #795629;
  box-shadow: 0 14px 32px #0007;
  transform: translateY(-3px);
}

.expansion-view__card img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.expansion-card__media {
  height: 230px;
  min-height: 230px;
  position: relative;
  overflow: hidden;
  background: #07121a;
}

.expansion-card__image,
.expansion-card__image > div,
.expansion-card__image a {
  display: block;
  width: 100%;
  height: 100%;
}

.expansion-card__image img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform .35s ease;
}

.expansion-view__card:hover .expansion-card__image img {
  transform: scale(1.025);
}

.expansion-card__band {
  min-height: 76px;
  padding: 13px 18px 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(0deg, #03101bee 0%, #06131dcc 68%, #06131d22 100%);
  border-top: 1px solid #ffffff12;
  backdrop-filter: blur(2px);
}

.expansion-view__card .expansion-card__title {
  margin: 0;
  color: #fff;
  font: 20px/1.15 Georgia, serif;
  letter-spacing: .3px;
  text-shadow: 0 2px 7px #000;
}

.expansion-view__card .expansion-card__title a {
  color: inherit;
}

.expansion-view__card .expansion-card__title a:hover,
.expansion-view__card .expansion-card__title a:focus-visible {
  color: var(--gold2);
}

.expansion-card__version {
  margin-top: 5px;
  color: var(--gold2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 1px 4px #000;
}

.expansion-card__version .field-content,
.expansion-card__version > div {
  display: inline;
}

.expansion-card__content {
  display: none;
}

.expansion-card__content:empty {
  display: none;
}

.expansion-card__field {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.expansion-card__field + .expansion-card__field {
  margin-top: 9px;
}

.expansion-view__card .views-field:not(.views-field-field-expansion-image),
.expansion-view__card .field:not(.field--name-field-expansion-image) {
  margin-right: 18px;
  margin-left: 18px;
}

.expansion-view__card h2,
.expansion-view__card h3,
.expansion-view__card .views-field-title {
  margin-top: 16px;
  margin-bottom: 8px;
  color: var(--text);
  font: 19px/1.3 Georgia, serif;
}

.expansion-view__card a:hover,
.expansion-view__card a:focus-visible {
  color: var(--gold2);
}

.expansion-view__card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.expansion-view__empty {
  padding: 28px;
  border: 1px solid #303b42;
  border-radius: 10px;
  color: var(--muted);
  background: #09151e;
  text-align: center;
}

.expansion-view__more,
.expansion-view__footer {
  margin-top: 22px;
}

@media (max-width: 1100px) {
  .expansion-view__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.main-nav ul.menu ul.menu a:hover,
.main-nav ul.menu ul.menu a:focus-visible {
  color: var(--gold2);
  background: #ffffff0a;
}

@media (max-width: 1100px) {
  .main-nav ul.menu {
    gap: 16px;
  }

  .main-nav ul.menu > li.menu-item > a {
    font-size: 10px;
  }
}

@media (max-width: 780px) {
  .main-nav > .block,
  .main-nav > .region,
  .main-nav > .region > .block,
  .main-nav > div > nav,
  .main-nav > .block > .content,
  .main-nav > .region > .block > .content,
  .main-nav ul.menu {
    display: block;
    width: 100%;
    height: auto;
  }

  .main-nav ul.menu > li.menu-item {
    display: block;
    height: auto;
    border-bottom: 1px solid #ffffff12;
  }

  .main-nav ul.menu > li.menu-item > a {
    min-height: 44px;
    padding: 13px 0;
    font-size: 11px;
  }

  .main-nav ul.menu ul.menu {
    display: block;
    width: 100%;
    padding: 0 0 8px 14px;
    position: static;
    border: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .expansion-hero {
    min-height: 230px;
    padding: 35px 22px;
  }

  .expansion-hero h1 {
    font-size: 34px;
  }

  .is-expansion-page .expansion-hero {
    min-height: 285px;
    padding: 38px 22px;
  }

  .expansion-overview__intro,
  .expansion-overview__fields {
    padding: 20px 18px;
  }

  .expansion-overview__heading {
    align-items: flex-start;
  }

  .expansion-content-region > div {
    grid-template-columns: 1fr;
  }

  .expansion-view__header {
    padding: 20px 18px;
  }

  .expansion-view__grid {
    grid-template-columns: 1fr;
  }

  .expansion-view__card img {
    height: 210px;
  }

  .expansion-view__card,
  .expansion-card__media {
    height: 210px;
    min-height: 210px;
  }
}

.main-nav a:hover i {
  transform: translateY(1px) rotate(45deg);
}

/* Expansions mega menu */
.nav-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.dropdown-trigger {
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
}

.dropdown-trigger i {
  width: 7px;
  height: 7px;
  margin-left: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  font-size: 0;
  font-style: normal;
  transition: transform .2s ease;
}

.nav-dropdown:hover .dropdown-trigger,
.nav-dropdown.open .dropdown-trigger,
.nav-dropdown:focus-within .dropdown-trigger {
  color: var(--gold2);
}

.nav-dropdown.open .dropdown-trigger i,
.nav-dropdown:focus-within .dropdown-trigger i {
  transform: translateY(2px) rotate(225deg);
}

.nav-dropdown.open .dropdown-trigger::after,
.nav-dropdown:focus-within .dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gold2);
}

.mega-menu {
  width: 520px;
  position: absolute;
  z-index: 20;
  top: calc(100% - 9px);
  left: 50%;
  transform: translate(-50%, 8px);
  border: 1px solid #384248;
  border-radius: 7px;
  background: linear-gradient(145deg, #101d26f7, #07121bf9);
  box-shadow: 0 18px 40px #000a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-dropdown.open .mega-menu,
.nav-dropdown:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.expansion-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  padding: 18px 13px 13px;
}

.main-nav .expansion {
  height: auto;
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 12px;
  text-transform: none;
  color: var(--text);
  font-size: 14px;
}

.main-nav .expansion::after {
  display: none;
}

.main-nav .expansion:hover {
  color: var(--gold2);
}

.expansion-art {
  width: 78px;
  height: 52px;
  display: block;
  overflow: hidden;
  border: 1px solid #303b40;
  border-radius: 4px;
  background-image: linear-gradient(25deg, #06101944, transparent), url(../assets/hero-fantasy.png);
  background-size: auto, 420px auto;
  box-shadow: inset 0 0 12px #0006;
}

.war-within {
  background-position: center, 90% 70%;
  filter: saturate(1.4) sepia(.25);
}

.draenor {
  background-position: center, 56% 48%;
  filter: sepia(.45);
}

.dragonflight {
  background-position: center, 68% 20%;
  filter: hue-rotate(175deg);
}

.pandaria {
  background-position: center, 42% 64%;
  filter: sepia(.65) saturate(.7);
}

.shadowlands {
  background-position: center, 73% 52%;
  filter: hue-rotate(185deg);
}

.cataclysm {
  background-position: center, 94% 16%;
  filter: saturate(1.7) sepia(.35);
}

.azeroth {
  background-position: center, 58% 73%;
  filter: hue-rotate(145deg);
}

.lich-king {
  background-position: center, 65% 40%;
  filter: hue-rotate(178deg);
}

.legion {
  background-position: center, 46% 47%;
  filter: hue-rotate(70deg) saturate(1.8);
}

.crusade {
  background-position: center, 78% 65%;
  filter: hue-rotate(55deg) saturate(1.8);
}

.expansion b {
  display: block;
  font-weight: 400;
}

.expansion small {
  display: block;
  margin-top: 4px;
  color: #abb1b5;
  font-size: 12px;
}

.main-nav .all-expansions {
  height: 50px;
  border-top: 1px solid #26323a;
  display: flex;
  justify-content: center;
  gap: 15px;
  color: var(--gold2);
  text-transform: none;
  font-size: 13px;
}

.main-nav .all-expansions::after {
  display: none;
}

@media (min-width: 781px) {
  .nav-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .nav-dropdown:hover .dropdown-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gold2);
  }

  .nav-dropdown:hover .dropdown-trigger i {
    transform: translateY(2px) rotate(225deg);
  }
}

@media (max-width: 780px) {
  .nav-dropdown {
    height: auto;
    display: block;
  }

  .dropdown-trigger {
    width: 100%;
    height: auto;
    padding: 13px 0;
  }

  .mega-menu {
    width: 100%;
    position: static;
    transform: none;
    display: none;
    opacity: 1;
    visibility: visible;
    border-radius: 5px;
  }

  .nav-dropdown.open .mega-menu, .nav-dropdown:focus-within .mega-menu {
    display: block;
    transform: none;
  }

  .nav-dropdown.open .dropdown-trigger::after, .nav-dropdown:focus-within .dropdown-trigger::after {
    display: none;
  }

  .expansion-grid {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .main-nav .expansion {
    padding: 0;
  }

  .main-nav .all-expansions {
    padding: 0;
  }
}

/* Dragonflight subpage */
.brand.brand-image {
  width: 270px;
  height: 72px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.brand-image img {
  width: 190px;
  height: 68px;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.brand.brand-signet {
  width: 270px;
  height: 72px;
  gap: 11px;
  overflow: visible;
}

.brand-signet img {
  width: 54px;
  height: 58px;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.brand-title {
  color: #e6a04b;
  font: 25px/1 Georgia, "Times New Roman", serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

.brand-title small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 5px;
}

.brand-title em {
  display: block;
  margin-top: 4px;
  color: #f1dfbd;
  font: 600 10px/1 Arial, sans-serif;
  letter-spacing: .65px;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 1px 4px #000, 0 0 7px #a9681a55;
}

.subpage {
  background: #06111a;
}

.sub-layout {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.sub-layout:not(.has-side-menu) {
  display: block;
}

.sub-sidebar {
  padding: 16px 24px;
  border-right: 1px solid #1d2a31;
  background: linear-gradient(145deg, #08151e, #050f17);
}

.side-panel {
  margin-bottom: 17px;
  padding: 14px 0;
  border: 1px solid #374148;
  border-radius: 7px;
  background: linear-gradient(145deg, #0c1922, #07121a);
  overflow: hidden;
}

.side-panel h2 {
  margin: 0 16px 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid #223039;
  color: var(--gold2);
  font: 14px Georgia, serif;
  text-transform: uppercase;
}

.side-panel a {
  min-height: 31px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d6d8da;
  font-size: 12px;
}

.side-panel a:hover, .side-panel a.selected {
  color: var(--gold2);
  background: linear-gradient(90deg, #34291c, #162029);
}

.side-panel a.selected {
  border-top: 1px solid #6a4923;
  border-bottom: 1px solid #6a4923;
}

.side-panel a i {
  color: var(--gold);
  font-style: normal;
}

.side-panel a b {
  margin-left: auto;
  font-size: 22px;
  font-weight: 400;
}

.contents-list h2 {
  color: var(--text);
}

.contents-list a {
  font-size: 16px;
  color: #bfc3c6;
}

.contents-list a span {
  font-size: 12px;
}

.sub-main {
  min-width: 0;
}

/* Drupal blocks rendered in the side_menu region. */
.sub-sidebar .block,
.sub-sidebar > div > nav,
.sub-sidebar > nav {
  margin-bottom: 17px;
  padding: 14px 0;
  border: 1px solid #374148;
  border-radius: 7px;
  background: linear-gradient(145deg, #0c1922, #07121a);
  overflow: hidden;
}

.sub-sidebar .block > h2,
.sub-sidebar > div > nav > h2,
.sub-sidebar > nav > h2 {
  margin: 0 16px 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid #223039;
  color: var(--gold2);
  font: 14px Georgia, serif;
  text-transform: uppercase;
}

.sub-sidebar .block ul,
.sub-sidebar nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-sidebar .block li,
.sub-sidebar nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sub-sidebar .block a,
.sub-sidebar nav a {
  min-height: 34px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d6d8da;
  font-size: 12px;
  transition: color .18s ease, background .18s ease;
}

.sub-sidebar .block a:hover,
.sub-sidebar .block a:focus-visible,
.sub-sidebar .block a.is-active,
.sub-sidebar .block li.menu-item--active-trail > a,
.sub-sidebar nav a:hover,
.sub-sidebar nav a:focus-visible,
.sub-sidebar nav a.is-active,
.sub-sidebar nav a.is-context-active,
.sub-sidebar nav li.menu-item--active-trail > a {
  color: var(--gold2);
  background: linear-gradient(90deg, #34291c, #162029);
}

.sub-sidebar .block a.is-active,
.sub-sidebar .block li.menu-item--active-trail > a,
.sub-sidebar nav a.is-active,
.sub-sidebar nav a.is-context-active,
.sub-sidebar nav li.menu-item--active-trail > a {
  border-top: 1px solid #6a4923;
  border-bottom: 1px solid #6a4923;
}

.sub-sidebar .block ul ul a,
.sub-sidebar nav ul ul a {
  padding-left: 28px;
  color: var(--muted);
  font-size: 11px;
}

.sub-sidebar nav a::before {
  content: "✦";
  flex: 0 0 13px;
  color: var(--gold);
  font-size: 10px;
  line-height: 1;
  text-align: center;
  opacity: .85;
}

.sub-sidebar nav a::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  opacity: 0;
  transform: rotate(45deg);
}

.sub-sidebar nav a:hover::after,
.sub-sidebar nav a:focus-visible::after,
.sub-sidebar nav a.is-active::after,
.sub-sidebar nav a.is-context-active::after,
.sub-sidebar nav li.menu-item--active-trail > a::after {
  opacity: 1;
}

.sub-sidebar nav a.is-active,
.sub-sidebar nav a.is-context-active {
  font-weight: 700;
}

.sub-sidebar .puzzle-side-panel {
  border-color: #544426;
  background: linear-gradient(145deg, #161b1d, #0b151b);
}

.sub-sidebar .puzzle-side-panel > h2 {
  color: #dcb35f;
}

.sub-sidebar .puzzle-side-panel a {
  color: #f0c66f;
  background: linear-gradient(90deg, #291e0f80, transparent);
}

.sub-sidebar .puzzle-side-panel a::before {
  content: "✦";
  color: var(--gold2);
}

.sub-sidebar .puzzle-side-panel a:hover,
.sub-sidebar .puzzle-side-panel a:focus-visible,
.sub-sidebar .puzzle-side-panel a.is-active {
  color: #fff3d0;
  background: #352712;
}

.sub-hero {
  min-height: 236px;
  padding: 32px 43px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #06131ed9 0, #06131e55 48%, #06131e88), linear-gradient(0deg, #07131d 0, transparent 45%), url(../assets/hero-fantasy.png) center 43%/cover no-repeat;
  border-bottom: 1px solid #27343b;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #b7bdc0;
  font-size: 11px;
}

.breadcrumbs b {
  color: #727c82;
  font-size: 16px;
}

.breadcrumbs span {
  color: var(--gold2);
}

.sub-hero h1 {
  margin: 12px 0 5px;
  text-transform: uppercase;
  font: 42px/1 Georgia, serif;
  letter-spacing: 2px;
}

.sub-hero p {
  margin: 7px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.patch-card {
  width: 198px;
  padding: 20px;
  border: 1px solid #4b4b43;
  border-radius: 7px;
  background: #0a161fdc;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 10px 25px #0005;
}

.patch-card > span {
  color: var(--gold2);
  font-size: 34px;
}

.patch-card b {
  display: block;
  color: var(--gold2);
  text-transform: uppercase;
  font-size: 13px;
}

.patch-card small {
  display: block;
  color: #b8bdc0;
  margin-top: 4px;
}

.section-tabs {
  height: 57px;
  padding: 0 43px;
  display: grid;
  grid-template-columns: repeat(9, auto);
  align-items: stretch;
  border-bottom: 1px solid #2a353b;
  background: #09151e;
}

.section-tabs a {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-right: 1px solid #29343a;
  text-transform: uppercase;
  font-size: 11px;
}

.section-tabs a:first-child {
  border-left: 1px solid #29343a;
}

.section-tabs a:hover, .section-tabs a.active {
  color: var(--gold2);
  background: linear-gradient(#2a261d, #111a20);
}

.section-tabs a.active {
  border-bottom: 2px solid var(--gold2);
}

.section-tabs a {
  font-size: 17px;
}

.section-tabs a span {
  font-size: 10px;
  color: inherit;
}

.sub-content {
  padding: 29px 43px 40px;
}

.overview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.overview-head h2, .latest-head h2 {
  margin: 0 0 8px;
  color: var(--gold2);
  font: 18px Georgia, serif;
  text-transform: uppercase;
}

.overview-head p {
  margin: 0;
  color: #c4c8ca;
  font-size: 12px;
  line-height: 1.7;
}

.sub-search {
  width: 300px;
  height: 39px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  border: 1px solid #344048;
  border-radius: 6px;
  background: #0c1720;
}

.sub-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.sub-search .search {
  flex: 0 0 22px;
  display: block;
  transform: scale(.75);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-card {
  min-width: 0;
  border: 1px solid #364047;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(145deg, #0b1821, #07131c);
}

.feature-art {
  height: 157px;
  background-image: linear-gradient(0deg, #07131c 0, transparent 45%), url(../assets/hero-fantasy.png);
  background-size: cover;
}

.dragon-card {
  background-position: 79% center;
}

.dungeon-card {
  background-position: 48% 72%;
  filter: hue-rotate(145deg) saturate(.8);
}

.raid-card {
  background-position: 93% 34%;
  filter: sepia(.65) saturate(2.5);
}

.achievement-card {
  background-position: 65% 28%;
  filter: hue-rotate(185deg);
}

.feature-copy {
  padding: 0 18px 17px;
}

.feature-copy h3 {
  margin: -2px 0 8px;
  color: var(--gold2);
  font: 24px Georgia, serif;
  text-transform: uppercase;
}

.feature-copy h3 span {
  margin-left: 8px;
  font-size: 16px;
}

.feature-copy p {
  min-height: 42px;
  margin: 0;
  color: #c5c9cb;
  font-size: 12px;
}

.feature-copy a {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  color: var(--gold2);
  font-size: 12px;
}

.latest-guides {
  margin-top: 25px;
}

.latest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.latest-head a {
  color: var(--gold2);
  text-transform: uppercase;
  font-size: 10px;
}

.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.latest-item {
  min-height: 85px;
  padding: 10px;
  display: grid;
  grid-template-columns: 90px 1fr 20px;
  align-items: center;
  gap: 12px;
  border: 1px solid #344047;
  border-radius: 6px;
  background: #09151e;
}

.latest-thumb {
  width: 90px;
  height: 62px;
  border-radius: 4px;
  background: url(../assets/hero-fantasy.png) center/350px auto;
}

.latest-thumb.forest {
  filter: hue-rotate(65deg);
}

.latest-thumb.fire {
  background-position: 90% 55%;
  filter: sepia(.5) saturate(2);
}

.latest-thumb.boss {
  background-position: 80% 70%;
  filter: sepia(.8) saturate(2);
}

.latest-item b, .latest-item small, .latest-item em {
  display: block;
}

.latest-item b {
  font-size: 12px;
  font-weight: 400;
}

.latest-item small, .latest-item em {
  color: #aeb4b8;
  font-size: 10px;
}

.latest-item em {
  margin-top: 7px;
  font-style: normal;
}

.latest-item strong {
  color: var(--gold2);
  font-size: 19px;
}

@media (max-width: 1200px) {
  .sub-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .sub-sidebar {
    padding: 15px 12px;
  }

  .section-tabs {
    padding: 0 20px;
    overflow-x: auto;
  }

  .section-tabs a {
    padding: 0 14px;
  }

  .sub-content {
    padding: 25px 25px 40px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .latest-grid {
    grid-template-columns: 1fr;
  }
}

/* Drupal blocks assigned exclusively to the front-page sidebar. */
.front-sidebar-region {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.front-sidebar-region > div {
  display: contents;
}

.front-sidebar-region .block,
.front-sidebar-region > div > nav,
.front-sidebar-region > nav,
.front-sidebar-region > div > section {
  padding: 15px 17px;
  border: 1px solid #303a3d;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 8px 20px #0004;
}

.front-sidebar-region h2 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #27343b;
  color: var(--text);
  font: 17px/1.2 Georgia, serif;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.front-sidebar-region ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.front-sidebar-region li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #233039;
  list-style: none;
}

.front-sidebar-region li:last-child {
  border-bottom: 0;
}

.front-sidebar-region a {
  display: block;
  padding: 8px 0;
  color: var(--muted);
}

.front-sidebar-region a:hover,
.front-sidebar-region a:focus-visible,
.front-sidebar-region a.is-active {
  color: var(--gold2);
}

/* Upcoming appointments View, styled like the static "Nächste Events" card. */
.front-sidebar-region .upcoming-events-block,
.upcoming-events-block {
  padding: 15px 17px;
}

.front-sidebar-region .upcoming-events-block .section-head h2,
.upcoming-events-block .section-head h2 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 0;
}

.front-sidebar-region .upcoming-events-block .section-head,
.upcoming-events-block .section-head {
  align-items: stretch;
}

.front-sidebar-region .upcoming-events-block .section-head h2::after,
.upcoming-events-block .section-head h2::after {
  bottom: -1px;
}

.front-sidebar-region .upcoming-events-block .section-head > a,
.upcoming-events-block .section-head > a {
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--gold2);
}

.upcoming-events-block .views-row {
  margin: 0;
}

.upcoming-events-block .event {
  grid-template-columns: 51px minmax(0, 1fr);
  min-height: 66px;
  font-family: Arial, Helvetica, sans-serif;
}

.upcoming-events-block .upcoming-event__date {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #394147;
  color: var(--gold2);
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.upcoming-events-block .upcoming-event__date b {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.upcoming-events-block .upcoming-event__date span {
  display: block;
  margin-top: 3px;
}

.upcoming-events-block .upcoming-event__content {
  min-width: 0;
}

.upcoming-events-block .upcoming-event__content h3 {
  margin: 0;
  font: 13px/1.35 Georgia, serif;
}

.upcoming-events-block .upcoming-event__content h3 a {
  display: block;
  padding: 5px 0;
  color: var(--text);
}

.upcoming-events-block .upcoming-event__content h3 a:hover,
.upcoming-events-block .upcoming-event__content h3 a:focus-visible {
  color: var(--gold2);
}

.upcoming-events-block .upcoming-event__time {
  width: fit-content;
  margin: 2px 0 7px;
  padding: 4px 8px 4px 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #725128;
  border-radius: 4px;
  color: #f5ead8;
  background: linear-gradient(135deg, #312313e8, #171711e8);
  box-shadow: inset 0 1px #ffffff0a;
  font: 700 12px/1.2 "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  letter-spacing: .35px;
  font-variant-numeric: tabular-nums;
}

.upcoming-events-block .upcoming-event__time > span {
  color: var(--gold2);
  font-size: 15px;
  line-height: 1;
}

.upcoming-events-block .upcoming-event__time time {
  color: inherit;
  white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
}

.upcoming-events-block .upcoming-event__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.upcoming-events-block .upcoming-event__tags .tag {
  position: static;
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid #3e789b;
  border-radius: 3px;
  color: #8ed6ff;
  background: #0a2636e8;
  font-size: 8px;
  line-height: 1.35;
  text-transform: uppercase;
}

.upcoming-events-block .upcoming-event__tags .tag--expansion {
  border-color: #a66c20;
  color: #f0a534;
  background: #2a1d0de8;
}

.upcoming-events-block .upcoming-event__tags .tag--category {
  border-color: #77549b;
  color: #c7a4ee;
  background: #21152fe8;
}

.upcoming-events-block .upcoming-event__reward {
  margin-top: 6px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-left: 2px solid #55a875;
  border-radius: 3px;
  color: #d8f4df;
  background: linear-gradient(90deg, #173324e8, #0b1c15a8);
}

.upcoming-events-block .upcoming-event__reward-icon {
  color: #73d495;
  font-size: 13px;
}

.upcoming-events-block .upcoming-event__reward small,
.upcoming-events-block .upcoming-event__reward strong {
  display: block;
}

.upcoming-events-block .upcoming-event__reward small {
  color: #73d495;
  font-size: 7px;
  line-height: 1.1;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.upcoming-events-block .upcoming-event__reward strong {
  margin-top: 1px;
  color: #e5f7e9;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
}

.upcoming-events-block .view-empty {
  padding: 12px 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 780px) {
  .brand.brand-image {
    width: auto;
    height: 64px;
  }

  .brand-image img {
    width: 145px;
    height: 60px;
  }

  .brand.brand-signet {
    width: auto;
    height: 64px;
    gap: 8px;
  }

  .brand-signet img {
    width: 45px;
    height: 49px;
  }

  .brand-title {
    font-size: 19px;
    letter-spacing: 3px;
  }

  .brand-title small {
    margin-top: 2px;
    font-size: 9px;
    letter-spacing: 4px;
  }

  .brand-title em {
    margin-top: 3px;
    font-size: 8px;
    letter-spacing: .35px;
  }

  .sub-layout {
    display: block;
  }

  .sub-sidebar {
    padding: 12px;
    border-right: 0;
  }

  .expansion-list {
    display: none;
  }

  .contents-list {
    margin: 0;
  }

  .contents-list h2 {
    display: none;
  }

  .contents-list {
    display: flex;
    overflow-x: auto;
    padding: 0;
  }

  .contents-list a {
    flex: 0 0 auto;
    border: 0 !important;
  }

  .sub-hero {
    min-height: 330px;
    padding: 40px 22px 25px;
    align-items: flex-end;
    background-position: 65% center;
  }

  .sub-hero h1 {
    font-size: 34px;
  }

  .sub-hero p br {
    display: none;
  }

  .patch-card {
    display: none;
  }

  .section-tabs {
    height: 54px;
    padding: 0;
  }

  .section-tabs a {
    min-width: 105px;
  }

  .sub-content {
    padding: 24px 16px;
  }

  .overview-head {
    display: block;
  }

  .overview-head p br {
    display: none;
  }

  .sub-search {
    width: 100%;
    margin-top: 18px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-art {
    height: 190px;
  }

  .latest-head {
    align-items: flex-end;
  }

  .latest-item {
    grid-template-columns: 72px 1fr 18px;
  }

  .latest-thumb {
    width: 72px;
  }
}

/* Mobile menu accordions and integrated side navigation. */
.main-nav ul[hidden] {
  display: none !important;
}

.submenu-toggle {
  display: none;
}

@media (max-width: 780px) {
  .main-nav.open {
    max-height: calc(100vh - 64px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .main-nav .menu-item--expanded,
  .main-nav .menu-item--has-submenu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
  }

  .main-nav .menu-item > ul.menu,
  .main-nav .menu-item--expanded > ul.menu,
  .main-nav .menu-item--has-submenu > ul.menu {
    display: none !important;
    grid-column: 1 / -1;
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .main-nav .menu-item.submenu-open > ul.menu,
  .main-nav .menu-item--expanded.submenu-open > ul.menu,
  .main-nav .menu-item--has-submenu.submenu-open > ul.menu {
    display: block !important;
  }

  .main-nav .menu-item--expanded > a::before,
  .main-nav .menu-item--expanded > span::before,
  .main-nav .menu-item--has-submenu > a::before,
  .main-nav .menu-item--has-submenu > span::before {
    display: none;
  }

  .submenu-toggle {
    align-self: stretch;
    width: 44px;
    min-height: 44px;
    height: auto;
    display: grid;
    place-items: center;
    margin: 4px 0;
    border: 1px solid #42515a;
    border-radius: 5px;
    color: var(--gold2);
    background: linear-gradient(145deg, #14242d, #0a1821);
    box-shadow: inset 0 1px #ffffff0a;
    cursor: pointer;
  }

  .submenu-toggle:hover,
  .submenu-toggle:focus-visible {
    border-color: #b78227;
    color: #ffd477;
    background: #1b2c35;
    outline: none;
  }

  .submenu-toggle span {
    width: 9px;
    height: 9px;
    display: block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(-2px) rotate(-45deg);
    transition: transform .18s ease;
  }

  .submenu-toggle[aria-expanded="true"] span {
    transform: translateY(-2px) rotate(45deg);
  }

  .sub-layout > .sub-sidebar {
    display: none;
  }

  .main-nav > .sub-sidebar {
    width: 100%;
    display: block;
    margin-top: 10px;
    padding: 14px 0 4px;
    border-top: 1px solid #354047;
    border-right: 0;
    background: transparent;
  }

  .main-nav > .sub-sidebar::before {
    content: "Seitennavigation";
    display: block;
    margin-bottom: 9px;
    color: var(--gold2);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
  }

  .main-nav > .sub-sidebar nav {
    margin-bottom: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .main-nav > .sub-sidebar nav > h2 {
    margin: 0;
    padding: 10px 0 6px;
    border-bottom: 1px solid #29353c;
    font-size: 12px;
  }

  .main-nav > .sub-sidebar nav a {
    min-height: 40px;
    padding: 10px 4px;
  }
}

/* Shared guide teaser cards for taxonomy and Guides Views. */
.guide-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.guide-teaser-grid__item {
  min-width: 0;
}

.guide-teaser {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #344047;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921, #07121a);
  box-shadow: 0 10px 25px #0004;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.guide-teaser:hover {
  border-color: #795629;
  box-shadow: 0 14px 32px #0007;
  transform: translateY(-3px);
}

.guide-teaser__media {
  height: 205px;
  display: block;
  overflow: hidden;
  position: relative;
  background: radial-gradient(circle at 60% 35%, #173247, #07121a 68%);
}

.guide-teaser__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease;
}

.guide-teaser:hover .guide-teaser__media img {
  transform: scale(1.03);
}

.guide-teaser__placeholder {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(135deg, #102838, #07121a);
}

.guide-teaser__type {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 4px 9px;
  border: 1px solid #a66c20;
  border-radius: 4px;
  color: #ffd18b;
  background: #261a0de8;
  box-shadow: 0 3px 10px #0007;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  line-height: 1.2;
  text-transform: uppercase;
}

.guide-teaser__type--appointment {
  border-color: #477b9a;
  color: #9fdcff;
  background: #0c2636e8;
}

.guide-teaser__tags {
  position: absolute;
  right: 12px;
  bottom: 11px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guide-teaser__tags small {
  padding: 3px 8px;
  border: 1px solid #9b6827;
  border-radius: 3px;
  color: var(--gold2);
  background: #071019e8;
  font-size: 9px;
  line-height: 1.3;
  text-transform: uppercase;
}

.guide-teaser__body {
  padding: 17px 18px 18px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.guide-teaser__body h2 {
  margin: 0 0 9px;
  color: var(--text);
  font: 19px/1.3 Georgia, serif;
}

.guide-teaser__body h2 a:hover, .guide-teaser__body h2 a:focus-visible {
  color: var(--gold2);
}

.guide-teaser__body p {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.guide-teaser__more {
  margin-top: auto;
  padding-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #29353c;
  color: var(--gold2);
  font-size: 10px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.guide-teaser__more b {
  font-size: 17px;
}

@media (max-width: 1100px) {
  .guide-teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Paragraph container: all guide modules share one visual panel. */
.keli-main-content {
  width: 100%;
  max-width: none;
  margin: 0 0 30px;
  padding: clamp(18px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid #344047;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 12px 32px #0004;
}

.keli-main-content__boss {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: clamp(18px, 2.2vw, 28px);
  padding: .8rem 1rem;
  border: 1px solid rgb(240 165 0 / 28%);
  border-left: 4px solid var(--gold2);
  border-radius: 8px;
  background: linear-gradient(90deg, rgb(240 165 0 / 12%), rgb(7 24 34 / 55%));
}

.keli-main-content__boss span {
  color: var(--gold2);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.keli-main-content__boss strong {
  color: #fff3ce;
  font-size: 1.05rem;
}

.keli-main-content__achievement-images {
  margin-bottom: clamp(22px, 3vw, 36px);
}

.keli-main-content__achievement-images > .field {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.keli-main-content__achievement-images .field__item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(240 165 0 / 20%);
  border-radius: 8px;
  background: rgb(4 16 24 / 72%);
}

.keli-main-content__achievement-images img {
  display: block;
  width: 100%;
  height: clamp(180px, 22vw, 300px);
  object-fit: cover;
  object-position: center;
  cursor: zoom-in;
}

.keli-main-content__inner > .field > .field__items,
.keli-main-content__inner > .field {
  display: flow-root;
}

.keli-main-content__inner > .field > .field__items > .field__item + .field__item,
.keli-main-content__inner > .field > .field__item + .field__item,
.keli-main-content__inner > .paragraph + .paragraph,
.keli-main-content__inner > .field > .paragraph + .paragraph,
.keli-main-content__inner .field--type-entity-reference-revisions > .field__items > .field__item + .field__item {
  margin-top: clamp(30px, 3.5vw, 48px) !important;
}

/* Give consecutive body-copy paragraphs room to breathe without leaving an
   empty strip below the final paragraph of a Maincontent section. */
.keli-main-content__inner :is(.text-formatted, .field--type-text, .field--type-text-long, .field--type-text-with-summary) > p,
.keli-main-content__inner :is(.field--type-text, .field--type-text-long, .field--type-text-with-summary) > .field__item > p {
  margin-top: 0;
  margin-bottom: clamp(18px, 2vw, 28px);
}

.keli-main-content__inner :is(.text-formatted, .field--type-text, .field--type-text-long, .field--type-text-with-summary) > p:last-child,
.keli-main-content__inner :is(.field--type-text, .field--type-text-long, .field--type-text-with-summary) > .field__item > p:last-child {
  margin-bottom: 0;
}

/* A heading following body copy needs a visible section break. This covers
   headings authored in the same CKEditor field. */
.keli-main-content :is(p, ul, ol, blockquote) + :is(h2, h3, h4, h5) {
  margin-top: 0;
  padding-top: clamp(26px, 3vw, 40px);
}

/* The headline Paragraph may follow a separate text Paragraph. Keep the
   spacing on the following element so the final text has no trailing gap. */
.keli-main-content .field__item + .field__item .keli-headline,
.keli-main-content .paragraph + .keli-headline {
  margin-top: 0;
}

/* Consistent spacing between separate page modules, regardless of whether
   Drupal renders the Paragraphs directly or inside field item wrappers. */
.keli-main-content__inner > * + *,
.guide-detail__content > .paragraph + .paragraph,
.appointment-detail__content > .paragraph + .paragraph,
.guide-detail__content .field--type-entity-reference-revisions > .field__items > .field__item + .field__item,
.appointment-detail__content .field--type-entity-reference-revisions > .field__items > .field__item + .field__item,
.keli-main-content__inner .field--type-entity-reference-revisions > .field__items > .field__item + .field__item {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Editorial quotations from CKEditor and Paragraph content. */
:where(
  .keli-main-content,
  .guide-detail__content,
  .appointment-detail__content,
  .node__content
) blockquote {
  margin: clamp(22px, 3vw, 34px) 0;
  padding: clamp(20px, 2.8vw, 30px) clamp(20px, 3.5vw, 42px) clamp(20px, 2.8vw, 28px) clamp(58px, 6vw, 76px);
  overflow: hidden;
  position: relative;
  border: 1px solid rgb(240 165 0 / 24%);
  border-left: 4px solid var(--gold2);
  border-radius: 8px;
  color: #e1e7e9;
  background:
    radial-gradient(circle at 0 0, rgb(240 165 0 / 11%), transparent 42%),
    linear-gradient(135deg, rgb(12 29 39 / 97%), rgb(6 19 28 / 97%));
  box-shadow: 0 12px 28px rgb(0 0 0 / 20%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  font-style: italic;
  line-height: 1.75;
}

:where(
  .keli-main-content,
  .guide-detail__content,
  .appointment-detail__content,
  .node__content
) blockquote::before {
  content: "“";
  position: absolute;
  top: 5px;
  left: 17px;
  color: rgb(240 165 0 / 72%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 3px 12px rgb(0 0 0 / 35%);
}

:where(
  .keli-main-content,
  .guide-detail__content,
  .appointment-detail__content,
  .node__content
) blockquote p {
  margin: 0;
}

:where(
  .keli-main-content,
  .guide-detail__content,
  .appointment-detail__content,
  .node__content
) blockquote p + p {
  margin-top: .8em;
}

:where(
  .keli-main-content,
  .guide-detail__content,
  .appointment-detail__content,
  .node__content
) blockquote cite,
:where(
  .keli-main-content,
  .guide-detail__content,
  .appointment-detail__content,
  .node__content
) blockquote footer {
  display: block;
  margin-top: 14px;
  color: #9eabb1;
  font-family: Arial, sans-serif;
  font-size: .75rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
}

:where(
  .keli-main-content,
  .guide-detail__content,
  .appointment-detail__content,
  .node__content
) blockquote cite::before {
  content: "— ";
  color: var(--gold2);
}

@media (max-width: 620px) {
  :where(
    .keli-main-content,
    .guide-detail__content,
    .appointment-detail__content,
    .node__content
  ) blockquote {
    padding: 48px 18px 19px;
  }

  :where(
    .keli-main-content,
    .guide-detail__content,
    .appointment-detail__content,
    .node__content
  ) blockquote::before {
    top: 2px;
    left: 16px;
  }
}

/* Paragraph: semantic decorative headlines. */
.keli-guide-image {
  max-width: 100%;
  margin: 0;
}

.keli-guide-image__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.keli-media-image {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 0 18px;
}

.keli-media-image:last-child {
  margin-bottom: 0;
}

.keli-media-image__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}

.keli-media-image--without-caption .keli-media-image__media img {
  border-radius: 8px;
}

.keli-guide-image__media,
.keli-guide-image__media .field,
.keli-guide-image__media .field__item,
.keli-guide-image__media picture {
  display: block;
  max-width: 100%;
}

.keli-guide-image__media img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
}

.keli-guide-image--without-caption .keli-guide-image__media img {
  border-radius: 8px;
}

.keli-guide-image__caption {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid rgb(240 165 0 / 25%);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  color: #aebbc2;
  background: linear-gradient(135deg, rgb(7 22 31 / 96%), rgb(5 17 25 / 96%));
  font-size: .8rem;
  font-style: italic;
  line-height: 1.5;
}

.keli-guide-image__caption > span {
  flex: 0 0 auto;
  color: var(--gold2);
  font-style: normal;
}

.keli-guide-image__caption-text,
.keli-guide-image__caption-text .field,
.keli-guide-image__caption-text .field__item,
.keli-guide-image__caption-text p {
  display: inline;
  margin: 0;
}

.keli-headline {
  width: 100%;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  color: #fff8e9;
}

/* Fallback while Drupal still serves a cached generic Paragraph template. */
.paragraph--type--keli--headlines .field--name-field-headline {
  margin: 0;
  color: #fff4d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.16;
  text-shadow: 0 2px 9px rgb(0 0 0 / 40%);
}

.paragraph--type--keli--headlines .field--name-field-headline-style {
  display: none;
}

.keli-headline__ornament {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(180px, 38%);
  margin-bottom: 8px;
  color: var(--gold2);
}

.keli-headline__ornament span {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.keli-headline__ornament span:last-child {
  background: linear-gradient(90deg, currentColor, transparent);
}

.keli-headline__ornament b {
  font-size: 12px;
  line-height: 1;
}

.keli-headline__title {
  margin: 0;
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.16;
  text-wrap: balance;
  text-shadow: 0 2px 9px rgb(0 0 0 / 40%);
}

.keli-headline__title .field,
.keli-headline__title .field__item {
  display: inline;
  margin: 0;
}

.keli-headline--h2 .keli-headline__title {
  color: #fff4d6;
  font-size: clamp(1.9rem, 3.2vw, 2.65rem);
  letter-spacing: .025em;
}

.keli-headline--h2 .keli-headline__ornament {
  width: min(220px, 45%);
  margin-bottom: 10px;
}

.keli-headline--h3 .keli-headline__title {
  padding-left: .75rem;
  border-left: 3px solid var(--gold2);
  color: #f3d184;
  font-size: clamp(1.4rem, 2.15vw, 1.8rem);
  letter-spacing: .01em;
}

/* Subsection headings need a non-collapsing gap. Drupal's nested Paragraph
   wrappers can swallow vertical margins, while padding remains reliable. */
.keli-main-content .keli-headline--h3,
.keli-main-content .keli-headline--h4,
.keli-main-content .keli-headline--h5 {
  padding-top: clamp(26px, 3vw, 40px);
}

.keli-headline--h3 .keli-headline__ornament {
  display: none;
}

.keli-headline--h4 .keli-headline__title {
  padding-bottom: .45rem;
  border-bottom: 1px solid rgb(240 165 0 / 28%);
  color: #dce6ea;
  font-family: inherit;
  font-size: clamp(1.12rem, 1.65vw, 1.38rem);
  font-weight: 800;
  letter-spacing: .035em;
}

.keli-headline--h5 .keli-headline__title {
  color: var(--gold2);
  font-family: inherit;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.keli-headline--h4 .keli-headline__ornament,
.keli-headline--h5 .keli-headline__ornament {
  display: none;
}

/* Heading hierarchy for CKEditor text inside Guide-style content areas. */
:where(
  .guide-detail__content,
  .appointment-detail__content,
  .erfolgstext-detail__content,
  .keli-main-content__inner
) :is(h2, h3, h4, h5):not(.keli-headline__title) {
  text-wrap: balance;
  text-shadow: 0 2px 9px rgb(0 0 0 / 35%);
}

:where(
  .guide-detail__content,
  .appointment-detail__content,
  .erfolgstext-detail__content,
  .keli-main-content__inner
) h2:not(.keli-headline__title) {
  margin: 1.75rem 0 .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgb(240 165 0 / 42%);
  color: #fff4d6;
  font: 700 clamp(1.75rem, 2.8vw, 2.35rem)/1.15 Georgia, "Times New Roman", serif;
}

:where(
  .guide-detail__content,
  .appointment-detail__content,
  .erfolgstext-detail__content,
  .keli-main-content__inner
) h3:not(.keli-headline__title) {
  margin: 1.5rem 0 .7rem;
  padding-left: .7rem;
  border-left: 3px solid var(--gold2);
  color: #f3d184;
  font: 700 clamp(1.35rem, 2vw, 1.75rem)/1.2 Georgia, "Times New Roman", serif;
}

:where(
  .guide-detail__content,
  .appointment-detail__content,
  .erfolgstext-detail__content,
  .keli-main-content__inner
) h4:not(.keli-headline__title) {
  margin: 1.3rem 0 .6rem;
  color: #dce6ea;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  font-weight: 800;
  letter-spacing: .035em;
}

:where(
  .guide-detail__content,
  .appointment-detail__content,
  .erfolgstext-detail__content,
  .keli-main-content__inner
) h5:not(.keli-headline__title) {
  margin: 1.15rem 0 .5rem;
  color: var(--gold2);
  font-size: clamp(.9rem, 1.25vw, 1rem);
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .keli-headline__ornament { width: min(145px, 55%); }

  .keli-main-content__boss {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }
}

/* Paragraph: flexible data table. */
.keli-table {
  width: 100%;
  margin-block: clamp(22px, 2.5vw, 34px);
}

.keli-table__scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgb(132 151 160 / 20%);
  border-radius: 6px;
  background: rgb(4 14 21 / 38%);
  scrollbar-color: var(--gold2) #101d25;
}

.keli-table__scroll:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 3px;
}

.keli-table__table {
  width: 100%;
  min-width: 420px;
  border: 0;
  border-collapse: collapse;
  color: #dbe5e9;
  font-size: clamp(.78rem, 1.05vw, .9rem);
  line-height: 1.4;
}

.keli-table__table :is(th, td) {
  padding: clamp(7px, .9vw, 10px) clamp(9px, 1.2vw, 13px);
  border-right: 1px solid rgb(118 144 156 / 16%);
  border-bottom: 1px solid rgb(118 144 156 / 16%);
  text-align: left;
  vertical-align: top;
}

.keli-table__table :is(th, td):last-child {
  border-right: 0;
}

.keli-table__table tbody tr:last-child td {
  border-bottom: 0;
}

.keli-table__table thead th {
  border-bottom-color: rgb(240 165 0 / 34%);
  color: #f5ddb0;
  font-weight: 800;
  letter-spacing: .015em;
  background: rgb(240 165 0 / 10%);
}

.keli-table__table tbody tr:nth-child(even) td {
  background: rgb(255 255 255 / 2.5%);
}

.keli-table__table tbody tr:hover td {
  background: rgb(240 165 0 / 5%);
}

/* Paragraph: variable column text. */
.keli-column-text {
  width: 100%;
  margin: 0;
}

.keli-column-text__items {
  display: grid;
  grid-template-columns: repeat(var(--keli-columns, 2), minmax(0, 1fr));
  gap: clamp(20px, 3vw, 42px);
  align-items: start;
}

.keli-column-text__item,
.keli-column-text__items > .field,
.keli-column-text__items > .field > .field__items,
.keli-column-text__items > .field > .field__item {
  min-width: 0;
}

.keli-column-text__items > .field > .field__items {
  display: contents;
}

.keli-column-text__items > .field {
  display: contents;
}

/* Drupal may render a multi-value field with anonymous wrappers when field
   labels and classes are disabled. Flatten that wrapper so every textarea
   value becomes a direct grid item. */
.keli-column-text--grid .keli-column-text__items > div {
  display: contents;
}

.keli-column-text--grid .keli-column-text__items > div > div {
  min-width: 0;
  break-inside: avoid;
}

.keli-column-text--flow-text .keli-column-text__items {
  display: block;
  column-count: var(--keli-columns, 2);
  column-gap: clamp(20px, 3vw, 42px);
  column-rule: 1px solid #29353c;
}

.keli-column-text--flow-text .field__item {
  display: contents;
}

.keli-column-text--flow-text p:first-child {
  margin-top: 0;
}

.keli-column-text--grid .field__item,
.keli-column-text__item {
  break-inside: avoid;
}

.keli-column-text--flow-text p {
  orphans: 3;
  widows: 3;
}

.keli-column-text__item > .paragraph,
.keli-column-text__item > div {
  margin: 0;
}

/* Paragraph: keli_teaser. */
.keli-teaser {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flow-root;
}

.keli-teaser--with-image {
  display: flow-root;
}

.keli-teaser--image-rechts .keli-teaser__image {
  float: right;
  margin: 0 0 18px clamp(18px, 2.5vw, 30px);
}

.keli-teaser__image {
  width: min(34%, 380px);
  min-height: 0;
  float: left;
  margin: 0 clamp(18px, 2.5vw, 30px) 18px 0;
  overflow: hidden;
  position: relative;
  border-radius: 7px;
  background: #06111a;
}

.keli-teaser__image > div,
.keli-teaser__image .paragraph,
.keli-teaser__image .field,
.keli-teaser__image .field__item {
  height: 100%;
}

.keli-teaser__image img {
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
}

.keli-teaser__content {
  min-width: 0;
  padding: 0;
  color: #c8ccce;
  font-size: 14px;
  line-height: 1.75;
}

.keli-teaser__content h2,
.keli-teaser__content h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-family: Georgia, serif;
  line-height: 1.25;
}

.keli-teaser__content h2 {
  font-size: 27px;
}

.keli-teaser__content h3 {
  font-size: 21px;
}

.keli-teaser__content p:first-child {
  margin-top: 0;
}

.keli-teaser__content p:last-child {
  margin-bottom: 0;
}

.keli-teaser__content a {
  color: var(--gold2);
}

/* Images that no longer fit beside the teaser text continue below it. */
.keli-teaser__image-overflow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 380px));
  clear: both;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  padding-top: clamp(18px, 2.5vw, 30px);
}

.keli-teaser--image-links .keli-teaser__image-overflow {
  direction: ltr;
  justify-content: start;
}

.keli-teaser--image-rechts .keli-teaser__image-overflow {
  direction: rtl;
  justify-content: start;
}

.keli-teaser__image-overflow:empty {
  display: none;
}

.keli-teaser__image-overflow .keli-media-image {
  width: 100%;
  min-width: 0;
  margin: 0;
  direction: ltr;
}

.keli-teaser--without-image .keli-teaser__content {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Guide overview filters. */
.guide-filter {
  margin: 0 0 clamp(24px, 3vw, 38px);
  padding: clamp(18px, 2.4vw, 28px);
  overflow: hidden;
  position: relative;
  border: 1px solid rgb(240 165 0 / 24%);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0, rgb(240 165 0 / 9%), transparent 38%),
    linear-gradient(145deg, rgb(12 27 36 / 98%), rgb(6 18 27 / 98%));
  box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
}

.guide-filter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--gold2), rgb(240 165 0 / 15%));
}

.guide-filter__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.guide-filter__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--gold2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.guide-filter__heading h2 {
  margin: 0;
  color: #fff8e9;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.guide-filter__reset {
  color: #c5d0d5;
  font-size: .75rem;
  text-decoration: none;
  transition: color .18s ease;
}

.guide-filter__reset:hover,
.guide-filter__reset:focus-visible {
  color: var(--gold2);
}

.guide-filter__form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 14px;
}

.guide-filter__field {
  min-width: 0;
}

.guide-filter__field label {
  display: block;
  margin: 0 0 7px;
  color: #aebbc2;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.guide-filter__field select {
  width: 100%;
  min-height: 43px;
  padding: 0 38px 0 12px;
  border: 1px solid #344750;
  border-radius: 6px;
  color: #eef3f4;
  background-color: #07151e;
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}

.guide-filter__field select:hover,
.guide-filter__field select:focus-visible {
  border-color: var(--gold2);
  outline: none;
  box-shadow: 0 0 0 3px rgb(240 165 0 / 10%);
}

.guide-filter__submit {
  min-height: 43px;
  padding: 0 18px;
  border: 1px solid var(--gold2);
  border-radius: 6px;
  color: #071018;
  background: linear-gradient(135deg, var(--gold2), #ffc84d);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.guide-filter__submit span {
  margin-left: 8px;
  font-size: 1.1em;
}

.guide-filter__submit:hover,
.guide-filter__submit:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .guide-filter__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .guide-filter__heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-filter__form {
    grid-template-columns: 1fr;
  }

  .guide-filter__submit {
    width: 100%;
  }
}

@media (max-width: 850px) {
  .keli-main-content {
    padding: 20px;
  }

  .keli-column-text__items,
  .keli-column-text__items > .field > .field__items {
    grid-template-columns: repeat(min(var(--keli-columns, 2), 2), minmax(0, 1fr));
  }

  .keli-column-text--flow-text .keli-column-text__items {
    column-count: min(var(--keli-columns, 2), 2);
  }

  .keli-teaser__image,
  .keli-teaser--image-rechts .keli-teaser__image {
    width: 100%;
    max-width: none;
    float: none;
    margin: 0 0 20px;
  }

  .keli-teaser__image img {
    width: 100%;
    height: auto;
    max-height: none;
  }

  .keli-teaser__image-overflow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .keli-column-text__items,
  .keli-column-text__items > .field > .field__items {
    grid-template-columns: 1fr;
  }

  .keli-column-text--flow-text .keli-column-text__items {
    column-count: 1;
  }
}

@media (max-width: 620px) {
  .guide-teaser-grid {
    grid-template-columns: 1fr;
  }

  .guide-teaser__media {
    height: 210px;
  }
}

/* Appointment detail: shared visual language with Guide content. */
.guide-detail {
  width: 100%;
}

.guide-detail__type {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border: 1px solid #b98524;
  border-radius: 4px;
  color: var(--gold2);
  background: #2b210de8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.guide-detail__content {
  width: 100%;
}

.guide-access {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  width: 100%;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid #344047;
  border-radius: 10px;
  background:
    radial-gradient(circle at 10% 20%, #d99a2514, transparent 35%),
    linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 12px 32px #0004;
}

.guide-access__icon {
  display: grid;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid #b98524;
  border-radius: 50%;
  color: var(--gold2);
  background: #2b210d99;
  font-size: 34px;
}

.guide-access__copy h2 {
  margin: 0 0 8px;
  color: var(--text);
}

.guide-access__copy p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.guide-access__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.guide-access__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid var(--gold2);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-decoration: none;
  text-transform: uppercase;
}

.guide-access__button--login {
  color: #111;
  background: var(--gold2);
}

.guide-access__button--register {
  color: var(--gold2);
  background: transparent;
}

.guide-access__button:hover,
.guide-access__button:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

@media (max-width: 620px) {
  .guide-access {
    align-items: flex-start;
    flex-direction: column;
  }

  .guide-access__actions,
  .guide-access__button {
    width: 100%;
  }
}

/* Event calendar overview. */
.managed-page-hero {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-bottom: 1px solid #29343a;
  background: #08131a;
}

.managed-page-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #04101ddd 0%, #04101d88 48%, #04101d33 75%),
    linear-gradient(0deg, #07131d 0%, transparent 65%);
  content: "";
}

.hero-region,
.hero-region > div {
  min-height: inherit;
}

/* The managed block now uses the exact same hero component as node pages. */
.hero-region > .expansion-hero {
  min-height: 300px;
}

.hero-region > div {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 48px 6%;
}

.hero-region .page-hero-block {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: 100%;
}

.hero-region .page-hero-block::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #04101ddd 0%, #04101d88 48%, #04101d33 75%),
    linear-gradient(0deg, #07131d 0%, transparent 65%);
  content: "";
}

.page-hero-block__media {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
}

.page-hero-block__media > div,
.page-hero-block__media img,
.page-hero-block__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero-block__media img {
  object-fit: cover;
  object-position: center 50%;
}

.page-hero-block__overlay {
  position: relative;
  z-index: 2;
  max-width: min(720px, 78%);
}

.page-hero-block__text {
  max-width: 620px;
  margin-top: 14px;
  color: #d7e0e5;
  font-size: 15px;
  line-height: 1.6;
  text-shadow: 0 2px 8px #000;
}

.page-hero-block__text > :first-child {
  margin-top: 0;
}

.page-hero-block__text > :last-child {
  margin-bottom: 0;
}

.hero-region .contextual-region {
  position: static;
}

.hero-region .field--type-image,
.hero-region .field--type-entity-reference,
.hero-region picture,
.hero-region .media,
.hero-region .media--type-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-region img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

.hero-region h1 {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0;
  color: #fff8e9;
  font: 700 52px/1.05 Georgia, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 3px 12px #000;
}

.hero-region .field--type-text,
.hero-region .field--type-text-long,
.hero-region .field--name-body {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin-top: 12px;
  color: #d7e0e5;
  line-height: 1.6;
  text-shadow: 0 2px 8px #000;
}

@media (max-width: 620px) {
  .managed-page-hero {
    min-height: 230px;
  }

  .hero-region > .expansion-hero {
    min-height: 230px;
  }

  .managed-page-hero::after {
    background:
      linear-gradient(90deg, #04101ddd 0%, #04101d88 62%, #04101d33 100%),
      linear-gradient(0deg, #07131d 0%, transparent 65%);
  }

  .hero-region > div {
    padding: 35px 22px;
  }

  .page-hero-block__overlay {
    max-width: 100%;
  }

  .hero-region .page-hero-block::after {
    background:
      linear-gradient(90deg, #04101ddd 0%, #04101d88 62%, #04101d33 100%),
      linear-gradient(0deg, #07131d 0%, transparent 65%);
  }

  .hero-region h1 {
    font-size: 34px;
  }
}

.event-calendar {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: clamp(18px, 2.6vw, 32px);
  border: 1px solid #30404a;
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 0, #d99a2512, transparent 30%),
    linear-gradient(145deg, #0c1922f5, #07121af5);
  box-shadow: 0 18px 45px #0005;
}

.event-calendar::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold2), #b36b17 38%, transparent 85%);
  content: "";
}

.event-calendar__intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid #2c3b44;
}

.event-calendar__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--gold2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.event-calendar__intro h2 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: clamp(20px, 2.2vw, 28px);
}

.event-calendar__intro p {
  max-width: 680px;
  margin: 0;
  color: #9cabb4;
  line-height: 1.6;
}

.event-calendar__hint {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid #75571f;
  border-radius: 999px;
  color: #e8bd60;
  background: #2a200f80;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.event-calendar__hint-icon {
  color: var(--gold2);
  font-size: 9px;
}

.event-calendar__body {
  min-width: 0;
}

.event-calendar .fc {
  color: #dce5ea;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.event-calendar .fc-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.event-calendar .fc-toolbar .fc-left,
.event-calendar .fc-toolbar .fc-right {
  display: flex;
  align-items: center;
}

.event-calendar .fc-toolbar .fc-right {
  justify-content: flex-end;
}

.event-calendar .fc-toolbar .fc-center h2 {
  margin: 0;
  color: #f4f0e7;
  font: 700 clamp(19px, 2vw, 26px)/1.2 Georgia, serif;
  letter-spacing: .2px;
}

.event-calendar .fc-button-primary {
  min-height: 38px;
  border: 1px solid #394d5a;
  border-radius: 4px;
  color: #dbe5eb;
  background: #172a37;
  box-shadow: none;
  font-size: 12px;
  text-shadow: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.event-calendar .fc-button-primary:not(:disabled):hover,
.event-calendar .fc-button-primary:not(:disabled):focus,
.event-calendar .fc-button-primary.fc-button-active {
  border-color: #ad7a25;
  color: #17130b;
  background: linear-gradient(#f0bd52, #c78822);
}

.event-calendar .fc-button-primary:disabled {
  border-color: #283841;
  color: #75858f;
  background: #111f29;
  opacity: 1;
}

.event-calendar .fc-button-group > .fc-button {
  border-radius: 4px;
}

.event-calendar .fc-view-container {
  overflow: hidden;
  border: 1px solid #344751;
  border-radius: 8px;
  background: #07131b;
}

.event-calendar .fc-widget-header {
  border-color: #354955;
  color: #e8bd60;
  background: #11232e;
}

.event-calendar .fc-day-header {
  padding: 10px 4px;
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.event-calendar .fc-widget-content {
  border-color: #293b46;
}

.event-calendar .fc-day {
  background: #091720;
  transition: background .18s ease;
}

.event-calendar .fc-day:hover {
  background: #10232e;
}

.event-calendar .fc-sat,
.event-calendar .fc-sun {
  background-color: #0b1b25;
}

.event-calendar .fc-other-month {
  background: #071219;
}

.event-calendar .fc-day-top {
  padding: 7px 8px 0;
  color: #bdc9cf;
  font-size: 11px;
}

.event-calendar .fc-other-month .fc-day-number {
  color: #53636c;
  opacity: 1;
}

.event-calendar .fc-unthemed td.fc-today,
.event-calendar td.fc-today {
  position: relative;
  background: #3a2b1059;
  box-shadow: inset 0 0 0 1px #d59a2e;
}

.event-calendar .fc-today .fc-day-number {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #17120a;
  background: var(--gold2);
  font-weight: 800;
}

.event-calendar .fc-event {
  margin: 2px 5px;
  padding: 4px 6px;
  border: 1px solid #467c9c;
  border-radius: 4px;
  color: #e5f4fc;
  background: linear-gradient(90deg, #12374d, #102c3d);
  box-shadow: 0 3px 8px #0004;
  font-size: 10px;
}

.event-calendar .fc-event:hover,
.event-calendar .fc-event:focus {
  border-color: var(--gold2);
  color: #fff;
  filter: brightness(1.12);
}

.event-calendar .fc-list-view {
  border: 0;
}

.event-calendar .fc-list-heading td {
  padding: 10px 14px;
  border-color: #344751;
  color: var(--gold2);
  background: #11232e;
}

.event-calendar .fc-list-item td {
  padding: 13px 10px;
  border-color: #263943;
  color: #dce5ea;
  background: #091720;
}

.event-calendar .fc-list-item:hover td {
  background: #10232e;
}

.event-calendar .fc-list-empty {
  padding: 45px 20px;
  color: #93a5af;
  background: #091720;
}

@media (max-width: 780px) {
  .event-calendar__intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .event-calendar__hint {
    display: none;
  }

  .event-calendar .fc-toolbar {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .event-calendar .fc-toolbar .fc-center {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .event-calendar .fc-toolbar .fc-left,
  .event-calendar .fc-toolbar .fc-right {
    flex: 1 1 auto;
  }

  .event-calendar .fc-toolbar .fc-right {
    justify-content: flex-end;
  }

  .event-calendar .fc-view-container {
    overflow-x: auto;
  }

  .event-calendar .fc-dayGridMonth-view {
    min-width: 680px;
  }
}

@media (max-width: 480px) {
  .event-calendar {
    padding: 16px 12px;
  }

  .event-calendar .fc-toolbar .fc-left,
  .event-calendar .fc-toolbar .fc-right,
  .event-calendar .fc-toolbar .fc-button-group {
    width: 100%;
  }

  .event-calendar .fc-toolbar .fc-right {
    margin-top: 4px;
  }

  .event-calendar .fc-toolbar .fc-button {
    flex: 1 1 auto;
  }
}

.appointment-detail {
  width: 100%;
  overflow: hidden;
  border: 1px solid #344047;
  border-radius: 10px;
  background: linear-gradient(145deg, #0d1921f2, #07121af2);
  box-shadow: 0 12px 32px #0004;
}

.appointment-detail__summary {
  padding: clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid #2b373e;
  background: linear-gradient(135deg, #10212ce8, #09151de8);
}

.appointment-detail__summary--with-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 38%);
  align-items: stretch;
  gap: clamp(20px, 3vw, 36px);
}

.appointment-detail__summary-content {
  min-width: 0;
}

.appointment-detail__promo-image {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  min-height: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid #46545c;
  border-radius: 8px;
  background: #061019;
  box-shadow: 0 10px 25px #0005;
}

.appointment-detail__promo-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.appointment-detail__type {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border: 1px solid #477b9a;
  border-radius: 4px;
  color: #9fdcff;
  background: #0c2636e8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.appointment-detail__schedule {
  display: flex;
  align-items: center;
  gap: 12px;
}

.appointment-detail__schedule + .appointment-detail__schedule {
  margin-top: 13px;
}

.appointment-detail__schedule--invite {
  width: fit-content;
  padding: 9px 13px;
  border-left: 3px solid #477b9a;
  border-radius: 4px;
  background: linear-gradient(90deg, #102d3ee8, #0a1d29a8);
}

.appointment-detail__schedule--invite > span {
  font-size: 22px;
}

.appointment-detail__schedule > span {
  color: var(--gold2);
  font-size: 28px;
}

.appointment-detail__schedule small,
.appointment-detail__schedule strong {
  display: block;
}

.appointment-detail__schedule small {
  color: var(--gold2);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.appointment-detail__schedule strong {
  margin-top: 3px;
  color: var(--text);
  font: 700 17px/1.25 "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.appointment-detail__meta {
  margin-top: 17px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.appointment-meta {
  padding: 4px 9px;
  border: 1px solid #3e789b;
  border-radius: 4px;
  color: #8ed6ff;
  background: #0a2636e8;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
}

.appointment-meta--expansion {
  border-color: #a66c20;
  color: #f0a534;
  background: #2a1d0de8;
}

.appointment-meta--category {
  border-color: #77549b;
  color: #c7a4ee;
  background: #21152fe8;
}

.appointment-detail__reward {
  width: fit-content;
  margin-top: 15px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-left: 3px solid #55a875;
  border-radius: 4px;
  color: #d8f4df;
  background: linear-gradient(90deg, #173324e8, #0b1c15a8);
}

.appointment-detail__reward > span,
.appointment-detail__reward small {
  color: #73d495;
}

.appointment-detail__reward small,
.appointment-detail__reward strong {
  display: block;
}

.appointment-detail__reward small {
  font-size: 8px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.appointment-detail__reward strong {
  margin-top: 2px;
  font-size: 12px;
}

.appointment-detail__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: clamp(22px, 3vw, 32px);
  border-bottom: 1px solid #2b373e;
  background: #091720b8;
}

.appointment-list {
  min-width: 0;
  padding: 18px;
  border: 1px solid #30424c;
  border-radius: 7px;
  background: linear-gradient(145deg, #10212bd9, #09161ed9);
}

.appointment-list h2 {
  margin: 0 0 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid #34454e;
  color: var(--text);
  font: 700 18px/1.25 Georgia, serif;
}

.appointment-list ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.appointment-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #2c3e48;
  border-radius: 5px;
  color: #d6e0e5;
  background: #07131bbd;
}

.appointment-list__icon {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
}

.appointment-list a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.appointment-list a:hover,
.appointment-list a:focus-visible {
  color: var(--gold2);
  text-decoration: underline;
}

.appointment-list--rewards {
  border-color: #456f52;
}

.appointment-list--rewards h2 {
  color: #91dda7;
}

.appointment-list--rewards .appointment-list__icon {
  color: #8be0a5;
  background: #173b24;
}

.appointment-list__reward-image {
  overflow: hidden;
  margin: 0 0 13px;
  border: 1px solid #456f52;
  border-radius: 6px;
  background: #06120c;
}

.appointment-list__reward-image img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.appointment-list--achievements {
  border-color: #755c29;
}

.appointment-list--achievements h2 {
  color: var(--gold2);
}

.appointment-list--achievements .appointment-list__icon {
  color: #17120a;
  background: var(--gold2);
  font-weight: 900;
}

.appointment-detail__content {
  padding: clamp(22px, 3vw, 38px);
  color: #c8ccce;
  font-size: 14px;
  line-height: 1.75;
}

.appointment-detail__content > .field + .field {
  margin-top: 24px;
}

.appointment-detail__content h2,
.appointment-detail__content h3 {
  color: var(--text);
  font-family: Georgia, serif;
}

.appointment-detail__content a {
  color: var(--gold2);
}

/* Public account and registration forms. */
.user-profile-layout #block-keliserfolge-page-title {
  display: none;
}

.user-profile-layout .sub-content {
  width: min(1180px, calc(100% - 36px));
}

.character-profile {
  overflow: hidden;
  width: 100%;
  margin-top: 24px;
  border: 1px solid #344650;
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 0, #d99a2514, transparent 32%),
    linear-gradient(145deg, #0d1b24f5, #07131bf5);
  box-shadow: 0 18px 48px #0006;
}

.character-profile__header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: clamp(25px, 4vw, 42px);
  border-bottom: 1px solid #31434c;
  background:
    linear-gradient(90deg, #102630e8, #0b1a23cc),
    radial-gradient(circle at 12% 50%, #d99a2518, transparent 28%);
}

.character-profile__identity {
  min-width: 0;
}

.character-profile__identity h1 {
  overflow-wrap: anywhere;
}

.character-profile__header::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold2), #a8691d 45%, transparent 85%);
  content: "";
}

.character-profile__avatar {
  display: grid;
  overflow: hidden;
  width: clamp(82px, 10vw, 116px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #b58129;
  border-radius: 50%;
  color: #17120a;
  background: linear-gradient(145deg, #efbc56, #9b651d);
  box-shadow: 0 0 0 5px #091720, 0 10px 24px #0008;
  font: 700 42px/1 Georgia, serif;
}

.character-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-profile__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--gold2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.character-profile__identity h1 {
  margin: 0;
  color: #fff8e9;
  font: 700 clamp(32px, 5vw, 56px)/1.05 Georgia, serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 3px 12px #000;
}

.character-profile__identity p {
  margin: 9px 0 0;
  color: #8fa2ac;
  font-size: 12px;
}

.character-profile__identity strong {
  color: #d7e1e6;
}

.character-profile__edit {
  padding: 10px 15px;
  border: 1px solid #8b6728;
  border-radius: 5px;
  color: var(--gold2);
  background: #241b0d99;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-decoration: none;
  text-transform: uppercase;
}

.character-profile__edit:hover,
.character-profile__edit:focus-visible {
  color: #17120a;
  background: var(--gold2);
}

.character-profile__body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr);
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 4vw, 40px);
}

.character-profile__section {
  min-width: 0;
}

.character-profile__section-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid #32444e;
}

.character-profile__section-heading > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #755a27;
  border-radius: 50%;
  color: var(--gold2);
  background: #251c0d;
  font-size: 11px;
}

.character-profile__section-heading h2 {
  margin: 0;
  color: #f2eee5;
  font: 700 18px/1.2 Georgia, serif;
}

.character-profile__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.character-profile__fact {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #2e424d;
  border-radius: 6px;
  background: linear-gradient(145deg, #0e202ad9, #08161ed9);
}

.character-profile__fact dt {
  margin-bottom: 4px;
  color: #7f96a2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.character-profile__fact dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: #eef3f5;
  font-size: 14px;
  font-weight: 700;
}

.character-profile__profiles {
  padding: 18px;
  border: 1px solid #344650;
  border-radius: 8px;
  background: #081820b8;
}

.character-profile__links {
  display: grid;
  gap: 9px;
}

.character-profile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 45px;
  padding: 10px 13px;
  border: 1px solid #3a505d;
  border-radius: 5px;
  color: #dce6eb;
  background: #0c202bd9;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .35px;
  text-decoration: none;
}

.character-profile__link b {
  color: var(--gold2);
}

.character-profile__link:hover,
.character-profile__link:focus-visible {
  border-color: var(--gold2);
  color: #fff;
  background: #142c38;
  transform: translateX(2px);
}

.character-profile__link--warcraftlogs {
  border-left: 3px solid #d3483f;
}

.character-profile__link--armory {
  border-left: 3px solid #2b91d0;
}

.character-profile__link--raiderio {
  border-left: 3px solid #8b62d2;
}

.character-profile__empty {
  color: #80939e;
}

@media (max-width: 780px) {
  .character-profile__header {
    grid-template-columns: auto 1fr;
  }

  .character-profile__edit {
    grid-column: 1 / -1;
    text-align: center;
  }

  .character-profile__actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .character-profile__actions .character-profile__edit {
    flex: 1 1 210px;
  }

  .character-profile__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .character-profile__header {
    justify-items: center;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .character-profile__facts {
    grid-template-columns: 1fr;
  }
}

.user-layout .sub-main {
  width: 100%;
}

.user-layout .sub-content {
  width: calc(100% - 36px);
  max-width: none;
  box-sizing: border-box;
  margin-inline: auto;
  padding-block: clamp(34px, 6vw, 72px);
}

.user-layout .tabs,
.user-layout .tabs ul,
.user-layout nav.tabs > ul {
  max-width: 100%;
}

.user-layout .tabs ul,
.user-layout nav.tabs > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1rem;
  padding: 0;
}

.user-layout .tabs li,
.user-layout nav.tabs li {
  flex: 0 0 auto;
  margin: 0;
}

.user-layout .tabs a,
.user-layout nav.tabs a {
  display: block;
  white-space: nowrap;
}

.user-layout .sub-content > div > h1,
.user-layout .sub-content h1 {
  color: #fff8e9;
  font: 700 clamp(30px, 4vw, 46px)/1.1 Georgia, serif;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 3px 12px #000;
}

.account-form {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 24px auto 0;
  border: 1px solid #344650;
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 0, #d99a2514, transparent 34%),
    linear-gradient(145deg, #0d1b24f5, #07131bf5);
  box-shadow: 0 18px 48px #0006;
}

.account-form::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold2), #aa6c1e, transparent);
  content: "";
}

.account-form__intro {
  padding: clamp(24px, 4vw, 38px);
  border-bottom: 1px solid #2d3e47;
  text-align: center;
  background: #10212b99;
}

.account-form__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--gold2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.account-form__intro h2 {
  margin: 0 0 9px;
  color: #fff8e9;
  font: 700 clamp(22px, 3vw, 30px)/1.2 Georgia, serif;
}

.account-form__intro p {
  max-width: 570px;
  margin: 0 auto;
  color: #9eafb8;
  line-height: 1.65;
}

.account-form__fields {
  padding: clamp(24px, 4vw, 38px);
}

.account-form .account-section {
  min-width: 0;
  margin: 0 0 24px;
  padding: 22px;
  border: 1px solid #344751;
  border-radius: 8px;
  background: #081720b8;
}

.account-form .account-section:last-of-type {
  margin-bottom: 0;
}

.account-form .account-section:not(:has(input, select, textarea)) {
  display: none;
}

.account-form .account-section > legend {
  width: auto;
  margin-left: -5px;
  padding: 0 8px;
  color: var(--gold2);
  font: 700 17px/1.2 Georgia, serif;
}

.account-form .account-section--standard > legend::before,
.account-form .account-section--game > legend::before {
  display: inline-grid;
  width: 25px;
  height: 25px;
  margin-right: 8px;
  place-items: center;
  border: 1px solid #6c552a;
  border-radius: 50%;
  color: var(--gold2);
  background: #251c0d;
  font: 700 11px/1 sans-serif;
  content: "I";
}

.account-form .account-section--game > legend::before {
  border-color: #416d88;
  color: #9fdcff;
  background: #0b2636;
  content: "✦";
}

.account-form .form-item,
.account-form .form-wrapper {
  position: relative;
  margin-block: 0 22px;
}

.account-form .form-item:last-child,
.account-form .form-wrapper:last-child {
  margin-bottom: 0;
}

.account-form label,
.account-form .form-item__label {
  display: block;
  margin-bottom: 7px;
  color: #e7edf0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .35px;
}

.account-form .form-required::after {
  margin-left: 4px;
  color: var(--gold2);
  content: "*";
}

.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"],
.account-form input[type="search"],
.account-form select,
.account-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #3a4d58;
  border-radius: 5px;
  color: #edf3f5;
  background: #06131bd9;
  box-shadow: inset 0 1px 4px #0005;
  font: 14px/1.4 "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus {
  border-color: var(--gold2);
  outline: 2px solid #d99a252b;
  outline-offset: 1px;
}

.account-form .form-item__description,
.account-form .description {
  margin: 0;
}

.account-help__trigger {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid #536a77;
  border-radius: 50%;
  color: #a8c9da;
  background: #0a202c;
  cursor: help;
  font-size: 12px;
  font-weight: 800;
}

.account-help__trigger:hover,
.account-help__trigger:focus-visible,
.account-help-open .account-help__trigger {
  border-color: var(--gold2);
  color: var(--gold2);
  outline: none;
}

.account-help {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: calc(100% - 2px);
  display: none;
  width: min(330px, 90%);
  padding: 14px 38px 14px 15px;
  border: 1px solid #526773;
  border-radius: 6px;
  color: #d6e0e5;
  background: #071923f5;
  box-shadow: 0 10px 28px #0009;
  font-size: 11px;
  line-height: 1.55;
}

.account-form .form-item:hover > .account-help,
.account-form .form-item:focus-within > .account-help,
.account-help-open > .account-help {
  display: block;
}

.account-help__close {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #9eb0ba;
  background: #172d38;
  cursor: pointer;
  font-size: 18px;
}

.account-form details {
  overflow: hidden;
  border: 1px solid #33464f;
  border-radius: 7px;
  background: #091820;
}

.account-form details > summary {
  padding: 13px 15px;
  color: #e7edf0;
  background: #10232d;
  cursor: pointer;
  font-weight: 700;
}

.account-form details > div {
  padding: 16px;
}

.account-form input[type="file"] {
  max-width: 100%;
  padding: 10px;
  border: 1px dashed #536670;
  border-radius: 5px;
  color: #aebdc5;
  background: #06131b;
}

.account-form .form-actions {
  margin-top: 28px;
}

.account-form input[type="submit"],
.account-form button[type="submit"] {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid #e0a53a;
  border-radius: 5px;
  color: #17120a;
  background: linear-gradient(#efbd57, #c88925);
  box-shadow: 0 5px 14px #0005;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.account-form input[type="submit"]:hover,
.account-form input[type="submit"]:focus-visible,
.account-form button[type="submit"]:hover,
.account-form button[type="submit"]:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.account-form__switch {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 17px 24px;
  border-top: 1px solid #2d3e47;
  color: #8fa1ab;
  background: #07131bd9;
  font-size: 12px;
}

.account-form__switch a {
  color: var(--gold2);
  font-weight: 700;
}

@media (max-width: 620px) {
  .account-form__switch {
    align-items: center;
    flex-direction: column;
  }

  .account-form input[type="submit"],
  .account-form button[type="submit"] {
    width: 100%;
  }

  .account-form .account-section {
    padding: 18px 14px;
  }
}

@media (max-width: 780px) {
  body.account-help-overlay-open {
    overflow: hidden;
  }

  body.account-help-overlay-open::before {
    position: fixed;
    z-index: 9998;
    inset: 0;
    background: #02080dc7;
    content: "";
  }

  .account-form .form-item > .account-help {
    display: none !important;
  }

  .account-form .form-item.account-help-open > .account-help {
    position: fixed;
    z-index: 9999;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    display: block !important;
    width: min(420px, calc(100vw - 32px));
    max-height: min(70vh, 480px);
    padding: 24px 48px 24px 22px;
    overflow-y: auto;
    border-color: #9b742d;
    transform: translate(-50%, -50%);
    font-size: 13px;
    line-height: 1.65;
  }
}

@media (max-width: 620px) {
  .appointment-detail__summary,
  .appointment-detail__content,
  .appointment-detail__lists {
    padding: 20px;
  }

  .appointment-detail__lists {
    grid-template-columns: 1fr;
  }

  .appointment-detail__summary--with-image {
    grid-template-columns: 1fr;
  }

  .appointment-detail__promo-image {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .appointment-detail__schedule strong {
    font-size: 15px;
  }
}
.character-profile__characters {
  grid-column: 1 / -1;
}

.character-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1rem;
}

.character-list--primary {
  display: block;
}

.character-card--primary {
  max-width: 620px;
}

.character-list__subheading {
  margin: 1.4rem 0 .7rem;
  color: #b8c4cd;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.character-list--compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 225px), 1fr));
  gap: .6rem;
}

.character-card {
  position: relative;
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .75rem;
  background: linear-gradient(145deg, rgba(17, 31, 42, .96), rgba(7, 19, 28, .96));
}

.character-card--main {
  border-color: rgba(245, 166, 35, .58);
  box-shadow: inset 3px 0 #f5a623;
}

.character-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.character-card__header h3 {
  margin: 0 0 .25rem;
  color: #fff;
  font-size: 1.25rem;
}

.character-card__header p {
  margin: 0;
  color: #aab9c5;
}

.character-card__main {
  padding: .25rem .45rem;
  border: 1px solid rgba(245, 166, 35, .55);
  border-radius: .25rem;
  color: #ffc454;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.character-card__links {
  display: grid;
  gap: .45rem;
}

.character-card--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  min-height: 0;
  padding: .65rem .75rem;
}

.character-card__compact-identity {
  min-width: 0;
}

.character-card__compact-identity h4 {
  overflow: hidden;
  margin: 0 0 .15rem;
  color: #fff;
  font-size: .95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-card__compact-identity p {
  overflow: hidden;
  margin: 0;
  color: #91a2ae;
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.character-card__compact-links {
  display: flex;
  flex: 0 0 auto;
  gap: .25rem;
}

.character-compact-link {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: .3rem;
  color: #dbe5eb;
  text-decoration: none;
}

.character-compact-link b {
  font-size: .6rem;
  letter-spacing: -.02em;
}

.character-compact-link span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
}

.character-compact-link:hover,
.character-compact-link:focus-visible {
  border-color: var(--gold2);
  color: var(--gold2);
}

.character-card__links .character-profile__link {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .character-card__header {
    flex-direction: column;
  }
}
.account-form .tabledrag-toggle-weight-wrapper,
.account-form .tabledrag-hide {
  display: none !important;
}
.character-profile__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.character-profile__edit--characters {
  border-color: rgba(245, 166, 35, .55);
  color: #ffc454;
}
.character-edit-list {
  display: grid;
  gap: .75rem;
  margin-bottom: 1rem;
}

.account-form--characters .character-edit-card {
  padding: .3rem .8rem .8rem;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: .65rem;
  background: rgba(7, 19, 28, .72);
}

.account-form--characters .character-edit-card > summary {
  padding: .7rem 0;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.account-form--characters .character-edit-card--new {
  border-color: rgba(245, 166, 35, .45);
}
.character-card__meta {
  margin-top: .35rem !important;
  color: #d5b36a !important;
  font-size: .75rem !important;
}
.upcoming-event__leader,
.guide-teaser__leader {
  margin: .35rem 0;
  color: #aebdc7;
  font-size: .8rem;
}

.upcoming-event__leader span,
.guide-teaser__leader span,
.appointment-detail__schedule--leader > span {
  color: var(--gold2);
}

/* Global site footer. */
.site-footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #39454c;
  color: #9fadb5;
  background:
    radial-gradient(circle at 18% 0, #d99a2514, transparent 32%),
    linear-gradient(145deg, #0b1821, #050e15);
  box-shadow: 0 -14px 42px #0004;
}

.site-footer::before {
  position: absolute;
  top: 0;
  left: 8%;
  width: 150px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold2), transparent);
  box-shadow: 0 0 14px #d99a2580;
}

.site-footer__blocks,
.site-footer__inner,
.site-footer__bottom {
  width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
}

.site-footer__blocks {
  padding-top: 24px;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(240px, .8fr) minmax(320px, 1.2fr);
  gap: clamp(38px, 8vw, 120px);
  padding: clamp(36px, 5vw, 64px) 0 34px;
}

.site-footer__brand,
.site-footer__privacy {
  min-width: 0;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #f3ead8;
  text-decoration: none;
}

.site-footer__logo img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px #0008);
}

.site-footer__logo strong,
.site-footer__logo small {
  display: block;
}

.site-footer__logo strong {
  font: 700 19px/1.1 Georgia, serif;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.site-footer__logo small {
  margin-top: 5px;
  color: var(--gold2);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.site-footer__brand p {
  max-width: 440px;
  margin: 17px 0 0;
  color: #8e9da6;
  font-size: 12px;
  line-height: 1.7;
}

.site-footer__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--gold2);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.site-footer__privacy h2 {
  margin: 0 0 10px;
  color: #f3ead8;
  font: 700 20px/1.2 Georgia, serif;
}

.site-footer__privacy p {
  max-width: 680px;
  margin: 0;
  color: #9eabb2;
  font-size: 12px;
  line-height: 1.75;
}

.site-footer__privacy-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  color: #e7b653;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-decoration: none;
  text-transform: uppercase;
}

.site-footer__privacy-link span {
  font-size: 18px;
  transition: transform .18s ease;
}

.site-footer__privacy-link:hover,
.site-footer__privacy-link:focus-visible,
.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: #ffd77c;
}

.site-footer__privacy-link:hover span,
.site-footer__privacy-link:focus-visible span {
  transform: translateX(3px);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 52px;
  padding: 12px 0;
  border-top: 1px solid #26343c;
  color: #667781;
  font-size: 9px;
}

.site-footer__bottom span:nth-child(2) {
  margin-right: auto;
}

.site-footer__bottom a {
  color: #a99367;
  text-decoration: none;
}

@media (max-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    padding: 17px 0;
  }

  .site-footer__bottom span:nth-child(2) {
    margin-right: 0;
  }
}

/* Event detail: compact overview and stronger visual hierarchy. */
.appointment-detail {
  position: relative;
  border-color: #354b58;
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0, #d99b2920, transparent 34%),
    linear-gradient(145deg, #0c1b24f7, #06121af7);
  box-shadow: 0 22px 60px #0007, inset 0 1px #ffffff08;
}

.appointment-detail::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: clamp(24px, 4vw, 52px);
  width: 110px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--gold2), transparent);
  box-shadow: 0 0 14px #e5a62c88;
}

.appointment-detail__summary {
  padding: clamp(24px, 3.4vw, 46px);
  background:
    linear-gradient(115deg, #102631f2, #091821ed),
    repeating-linear-gradient(135deg, transparent 0 18px, #ffffff03 18px 19px);
}

.appointment-detail__summary--with-image {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: clamp(28px, 4vw, 54px);
}

.appointment-detail__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
}

.appointment-detail__eyebrow .appointment-detail__type {
  margin: 0;
}

.appointment-detail__eyebrow-text {
  color: #8fa2ad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.appointment-detail__eyebrow-text::before {
  display: inline-block;
  width: 26px;
  height: 1px;
  margin: 0 10px 3px 0;
  content: "";
  background: #536874;
}

.appointment-detail__intro h2 {
  margin: 0;
  color: #f5ead6;
  font: 700 clamp(22px, 2.2vw, 30px)/1.15 Georgia, serif;
}

.appointment-detail__intro p {
  max-width: 570px;
  margin: 8px 0 22px;
  color: #9eafb8;
  font-size: 13px;
}

.appointment-detail__schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.appointment-detail__schedule,
.appointment-detail__schedule--invite {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  min-height: 112px;
  margin: 0;
  padding: 15px 14px;
  overflow: hidden;
  border: 1px solid #314955;
  border-left: 1px solid #314955;
  border-radius: 8px;
  background: linear-gradient(145deg, #102833d9, #0a1a23d9);
}

.appointment-detail__schedule::after {
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  content: "";
  background: #d99b290a;
}

.appointment-detail__schedule-icon,
.appointment-detail__schedule--invite > .appointment-detail__schedule-icon {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #9c742d88;
  border-radius: 50%;
  color: var(--gold2);
  background: #221b10b8;
  font-size: 17px;
}

.appointment-detail__schedule small {
  color: #d9a743;
}

.appointment-detail__schedule strong {
  overflow-wrap: anywhere;
  font-size: 15px;
}

.appointment-detail__schedule em {
  display: block;
  margin-top: 5px;
  color: #82949e;
  font: normal 10px/1.35 "Segoe UI", Arial, sans-serif;
}

.appointment-detail__promo-image {
  min-height: 330px;
  border-color: #56636a;
  border-radius: 11px;
  background: #050d12;
  box-shadow: 0 18px 42px #0008;
}

.appointment-detail__promo-image::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #ffffff0a, inset 0 -55px 55px #02080c73;
}

.appointment-detail__promo-image img {
  padding: 6px;
  object-fit: contain;
}

.appointment-detail__meta {
  padding-top: 17px;
  border-top: 1px solid #2f424c;
}

.appointment-detail__content {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(180deg, #091821b8, #07131bb8);
  font-size: 15px;
}

.appointment-detail__section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 13px;
  border-bottom: 1px solid #30434d;
}

.appointment-detail__section-heading span {
  color: var(--gold2);
  text-shadow: 0 0 12px #e3a42b99;
}

.appointment-detail__section-heading h2 {
  margin: 0;
  color: #f5ead6;
  font: 700 22px/1.2 Georgia, serif;
}

@media (max-width: 1050px) {
  .appointment-detail__schedule-grid {
    grid-template-columns: 1fr;
  }

  .appointment-detail__schedule {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .appointment-detail__summary--with-image {
    grid-template-columns: 1fr;
  }

  .appointment-detail__promo-image {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .appointment-detail__eyebrow-text {
    display: none;
  }
}

.upcoming-event__leader strong,
.guide-teaser__leader strong {
  color: #f3ead8;
}