:root {
  color-scheme: dark;
  --void: #100d0b;
  --wood: #2d180e;
  --gold: #bd8c3a;
  --gold-light: #f5d47e;
  --parchment: #d9c08e;
  --parchment-light: #f2e0b5;
  --ink: #2d1b11;
}

* { box-sizing: border-box; }

body {
  min-height: 100svh;
  margin: 0;
  color: var(--parchment);
  font-family: Georgia, "Times New Roman", serif;
  background:
    radial-gradient(ellipse at 50% -8rem, #67513b 0, transparent 37rem),
    linear-gradient(100deg, #090807aa 0 2%, transparent 2% 98%, #090807aa 98%),
    repeating-linear-gradient(21deg, #17120f 0 2px, #1d1713 2px 7px, #120f0d 7px 10px);
  text-shadow: 0 2px 2px #000;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: .38;
  background:
    linear-gradient(90deg, transparent 0 49.7%, #0006 50%, transparent 50.3%),
    repeating-linear-gradient(0deg, transparent 0 5px, #0003 5px 6px);
  mix-blend-mode: multiply;
}

body::after {
  inset: 1rem;
  border: 1px solid #8c6a38;
  box-shadow: inset 0 0 0 2px #1a120d, inset 0 0 0 4px #574124, 0 0 0 1px #000;
  opacity: .6;
}

a { color: inherit; }

.site-header,
main,
footer {
  width: min(100% - 2.5rem, 76rem);
  margin-inline: auto;
}

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 7.7rem;
  padding: .7rem 1.15rem;
  border: 1px solid #8a6738;
  border-top: 0;
  background:
    linear-gradient(180deg, #5d3c23 0, #24150d 8%, #1b110c 92%, #4d2d18),
    var(--wood);
  box-shadow: inset 0 0 0 2px #160d09, inset 0 -2px 0 #98713a, 0 9px 22px #000b;
}

.site-header::before,
.site-header::after {
  position: absolute;
  bottom: -10px;
  width: 20px;
  height: 20px;
  border: 3px solid #bc8b40;
  background: #27160d;
  box-shadow: inset 0 0 0 2px #090706, 0 2px 4px #000;
  content: "";
  transform: rotate(45deg);
}

.site-header::before { left: 1.5rem; }
.site-header::after { right: 1.5rem; }

.brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  color: var(--gold-light);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: .045em;
  line-height: .9;
  text-decoration: none;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 3.85rem;
  height: 3.85rem;
  border: 3px solid #c89542;
  outline: 2px solid #1b1009;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 38%, #b94e35 0 15%, #702016 16% 55%, #2a100f 56% 100%);
  box-shadow: inset 0 0 0 3px #3f1712, inset 0 0 16px #000, 0 2px 6px #000;
}

.brand-mark span {
  color: #f5d378;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.05em;
  text-shadow: 1px 1px #310d09, 0 0 5px #000;
}

.brand small {
  display: block;
  margin-top: .55rem;
  color: #c29b59;
  font-family: system-ui, sans-serif;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .18em;
}

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .55rem;
  max-width: 38rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.site-session-form { margin: 0; }

.site-session-form .text-button {
  display: block;
  width: 100%;
  font: inherit;
  cursor: pointer;
}

.site-header nav a,
.text-button {
  min-height: 2.35rem;
  padding: .58rem .8rem;
  border: 1px solid #9c7339;
  outline: 1px solid #1a0e09;
  outline-offset: -3px;
  background: linear-gradient(#5e3a21, #2b160d 48%, #4a2a16);
  color: #e8cc8d;
  box-shadow: inset 0 1px #b9904f, 0 2px 3px #0009;
  text-decoration: none;
}

.site-header nav a:hover,
.text-button:hover,
.back-link:hover {
  border-color: var(--gold-light);
  background: linear-gradient(#84522b, #3c1e10 48%, #6b3b1d);
  color: #fff0bd;
}

.account {
  padding: .35rem .45rem;
  color: #e5c47b;
  font-family: system-ui, sans-serif;
  font-size: .76rem;
  letter-spacing: 0;
  text-transform: none;
}

.inline-form { display: inline; }

.text-button { cursor: pointer; font: inherit; }

.hero,
.page-heading {
  position: relative;
  margin-top: clamp(3rem, 8vw, 6.5rem);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.35rem, 5vw, 5.2rem) clamp(3.5rem, 8vw, 5.8rem);
  border: 2px solid #96713c;
  outline: 1px solid #1a100b;
  outline-offset: 5px;
  background:
    radial-gradient(ellipse at 50% 12%, #7a5730aa 0, transparent 25rem),
    linear-gradient(125deg, #2c1c13 0, #16100d 45%, #352015 100%);
  box-shadow: inset 0 0 0 3px #5a4229, inset 0 0 0 5px #1d130e, 0 17px 32px #000b;
  text-align: center;
}

.hero::before,
.page-heading::before {
  position: absolute;
  top: -2.4rem;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 3px solid #c79542;
  outline: 2px solid #1d110a;
  border-radius: 50%;
  background: radial-gradient(circle, #ab4932, #491611 67%, #1b0d0a 68%);
  box-shadow: inset 0 0 0 3px #7a281b, 0 4px 9px #000;
  color: #f7db90;
  content: "✦";
  font-size: 1.5rem;
  transform: translateX(-50%);
}

.hero h1,
.page-heading h1 {
  max-width: none;
  margin: .85rem 0 1.45rem;
  color: #f5d888;
  font-size: clamp(3rem, 10.5vw, 7.4rem);
  line-height: .88;
  letter-spacing: .035em;
  text-shadow: 0 2px #52220e, 0 4px #1e0d08, 0 9px 17px #000;
  text-transform: uppercase;
}

.page-heading { text-align: left; }
.page-heading::before { left: auto; right: 2rem; transform: none; }
.page-heading h1 { font-size: clamp(2.5rem, 7vw, 4.7rem); }
.compact { padding-bottom: 2.5rem; }

.eyebrow {
  margin: 0;
  color: #d7b66e;
  font-family: system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.lede,
.page-heading > p {
  max-width: 46rem;
  margin-inline: auto;
  color: #d4c097;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.7;
}

.page-heading > p { margin-inline: 0; }

.button {
  display: inline-block;
  min-width: 13rem;
  margin-top: 1.45rem;
  padding: .86rem 1.35rem;
  border: 2px solid #d8a94f;
  outline: 2px solid #241309;
  outline-offset: -5px;
  background: linear-gradient(#aa5739 0, #672016 48%, #46130f 100%);
  color: #ffdc88;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 2px #350d08;
  box-shadow: inset 0 1px #ef9b68, inset 0 -2px #280b08, 0 5px 0 #170b07, 0 8px 12px #0008;
}

.button:hover {
  border-color: #ffe2a0;
  background: linear-gradient(#c46b47 0, #80291b 48%, #56160f 100%);
  color: #fff1bc;
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px #ef9b68, 0 2px 0 #170b07;
}

.hint {
  max-width: 36rem;
  margin: 1.6rem auto 0;
  color: #ac9a76;
  font-family: system-ui, sans-serif;
  font-size: .83rem;
  line-height: 1.6;
}

.grid { display: grid; gap: 1.4rem; }

.intro-grid {
  grid-template-columns: repeat(3, 1fr);
  padding: 4.5rem 0 5.5rem;
}

.intro-grid article,
.panel,
.post {
  position: relative;
  border: 2px solid #8d6738;
  outline: 1px solid #21130c;
  outline-offset: -6px;
  background:
    linear-gradient(90deg, #8b653a22, transparent 15%, transparent 85%, #8b653a22),
    repeating-linear-gradient(-6deg, #e5c98e 0 3px, #d3b47b 3px 7px, #e0c48a 7px 12px);
  box-shadow: inset 0 0 0 4px #6d4d2b, inset 0 0 16px #79582f88, 0 10px 18px #000a;
}

.intro-grid article {
  min-height: 15rem;
  padding: 3rem 1.45rem 1.6rem;
}

.chapter {
  position: absolute;
  top: -1.3rem;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 2px solid #b98538;
  outline: 2px solid #2a160d;
  border-radius: 50%;
  background: linear-gradient(#4c2b18, #20120b);
  color: #f1d382;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .95rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px #7d4a25, 0 3px 5px #0008;
  transform: translateX(-50%);
}

.intro-grid h2,
.panel h2,
.thread-list h2 {
  margin: 0 0 .8rem;
  color: #572414;
  font-size: 1.45rem;
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 0 1px #f4dda7;
}

.intro-grid h2::after,
.panel h2::after {
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: .65rem auto 0;
  background: linear-gradient(90deg, transparent, #8a5626, transparent);
  content: "";
}

.intro-grid p {
  margin: 0;
  color: #4b3420;
  line-height: 1.65;
  text-align: center;
  text-shadow: none;
}

.panel {
  max-width: 48rem;
  padding: clamp(1.75rem, 4vw, 2.6rem);
  margin: 3.5rem 0 2rem;
  color: var(--ink);
  text-shadow: none;
}

.form-stack { display: grid; gap: 1rem; }

.form-stack label {
  display: grid;
  gap: .45rem;
  color: #50351f;
  font-size: .94rem;
  font-weight: 700;
}

.optional { color: #806747; font-weight: 400; }

input,
textarea {
  width: 100%;
  border: 2px solid #745026;
  outline: 1px solid #e3c68a;
  outline-offset: 2px;
  background: #f1dbab;
  color: #28160d;
  padding: .78rem;
  font: inherit;
  text-shadow: none;
  box-shadow: inset 0 2px 6px #77532644;
}

textarea { min-height: 10rem; resize: vertical; }

.notice {
  max-width: 48rem;
  margin: 3rem 0 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid #a57a3e;
  background: #241710;
  box-shadow: inset 0 0 0 2px #0e0906;
  color: #dec795;
  line-height: 1.5;
}

.notice.error { border-color: #cf5144; color: #ffc0ae; }
.notice.success { border-color: #8db564; color: #d1ecae; }

.thread-list { padding: 3.5rem 0 5.5rem; }

.thread-list h2 {
  color: var(--gold-light);
  font-size: clamp(1.8rem, 4vw, 2.65rem);
  text-align: left;
  text-shadow: 0 2px #28150c;
}

.thread-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.15rem 1.5rem;
  border: 1px solid #84653e;
  border-bottom-color: #120d09;
  background: linear-gradient(90deg, #4a2917, #261812 44%, #17110e);
  box-shadow: inset 0 1px #8e6635, inset 0 -1px #000;
  text-decoration: none;
}

.thread-row::before {
  position: absolute;
  top: 50%;
  left: .45rem;
  width: .4rem;
  height: .4rem;
  border: 1px solid #efca72;
  background: #8e3022;
  box-shadow: 0 0 5px #000;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.thread-row + .thread-row { border-top: 0; }
.thread-row:hover { background: linear-gradient(90deg, #6a3920, #342015 44%, #24150e); }
.thread-row:hover strong { color: #ffe08a; }
.thread-row span { display: grid; gap: .3rem; }
.thread-row strong { color: #e2c180; font-size: 1.08rem; }
.thread-row small,
.thread-row time { color: #aa9879; font-family: system-ui, sans-serif; }
.thread-row time { font-size: .78rem; white-space: nowrap; }
.empty { color: #bba783; }

.posts { display: grid; gap: 1rem; margin: 3rem 0 2rem; }
.post { padding: 1.45rem; color: var(--ink); text-shadow: none; }

.post header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid #9d7440;
  color: #592d18;
}

.post time { color: #725a3d; font-family: system-ui, sans-serif; font-size: .78rem; }
.post p { margin-bottom: 0; line-height: 1.65; white-space: pre-wrap; }

.back-link {
  display: inline-block;
  margin-top: 2.5rem;
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

footer {
  padding: 1.4rem 0 2.8rem;
  color: #97825d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .78rem;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}

footer span { color: #d2ae66; }

@media (max-width: 52rem) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .site-header nav { justify-content: flex-start; }
  .intro-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .intro-grid article { min-height: auto; }
}

@media (max-width: 38rem) {
  body::after { inset: .5rem; }
  .site-header, main, footer { width: min(100% - 1.4rem, 76rem); }
  .site-header { padding: .8rem; }
  .site-header nav { width: 100%; }
  .site-header nav a, .text-button { flex: 1 1 auto; text-align: center; }
  .brand { font-size: 1.2rem; }
  .brand-mark { width: 3.2rem; height: 3.2rem; }
  .hero, .page-heading { margin-top: 3.4rem; padding-inline: 1rem; }
  .page-heading::before { right: 1rem; }
  .thread-row, .post header { flex-direction: column; }
  .thread-row time { white-space: normal; }
}

/* Classic portal-inspired guild layout: original artwork and responsive UI. */
body {
  background:
    radial-gradient(ellipse at 50% -18rem, #31526c 0, transparent 45rem),
    linear-gradient(90deg, #07111b 0, #182a36 18%, #0a121a 50%, #182a36 82%, #07111b 100%);
}

body::after {
  border-color: #546c77;
  box-shadow: inset 0 0 0 2px #0a1116, inset 0 0 0 4px #263a44, 0 0 0 1px #000;
}

.site-header {
  min-height: 5.4rem;
  border-color: #5d7886;
  background:
    repeating-linear-gradient(0deg, #ffffff0b 0 1px, transparent 1px 4px),
    linear-gradient(#263e4b, #101e28 44%, #071018 50%, #1c303a);
  box-shadow: inset 0 0 0 2px #081016, inset 0 -2px #b28a3c, 0 7px 18px #000b;
}

.site-header::before,
.site-header::after {
  bottom: -7px;
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: #b38a3d;
  background: #16252c;
}

.brand { font-size: clamp(1.15rem, 2.7vw, 1.55rem); }

.brand-mark {
  width: 3.3rem;
  height: 3.3rem;
  overflow: hidden;
  border-color: #d4ad55;
  outline-color: #080d11;
  background: #080b0e;
}

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

.brand small { color: #a9c1c9; }

.site-header nav a,
.text-button {
  min-height: 2.1rem;
  border-color: #526d78;
  background: linear-gradient(#294855, #11232c 52%, #1c343e);
  color: #d8c17c;
  box-shadow: inset 0 1px #668490, 0 2px 3px #0009;
}

.site-header nav a:hover,
.text-button:hover {
  border-color: #dbc170;
  background: linear-gradient(#3a6070, #16323e 52%, #294b57);
  color: #fff0b3;
}

.guild-portal {
  display: grid;
  grid-template-columns: minmax(11.5rem, .75fr) minmax(0, 2.2fr) minmax(12.5rem, .8fr);
  gap: .9rem;
  align-items: start;
  padding: 3.2rem 0 5rem;
}

.crest-rail,
.status-rail {
  border: 1px solid #466473;
  background:
    repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 4px),
    linear-gradient(145deg, #203945, #0b161e 52%, #182b34);
  box-shadow: inset 0 0 0 2px #081016, inset 0 0 0 4px #263b45, 0 10px 22px #0009;
}

.crest-rail {
  position: sticky;
  top: 1.2rem;
  padding: 1rem .85rem 1.25rem;
  text-align: center;
}

.crest-frame {
  width: min(100%, 12rem);
  margin: -.5rem auto .75rem;
  filter: drop-shadow(0 8px 7px #000b);
}

.crest-frame img { display: block; width: 100%; height: auto; }

.crest-kicker,
.crest-motto {
  margin: 0;
  color: #c4a65f;
  font-family: system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.crest-name {
  margin: .55rem 0 .45rem;
  color: #f0d58d;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}

.crest-motto { color: #a9c2cc; letter-spacing: .1em; }

.crest-divider {
  display: block;
  height: 2px;
  margin: 1.25rem .3rem 1rem;
  background: linear-gradient(90deg, transparent, #bb913d, transparent);
}

.crest-copy {
  margin: 0;
  color: #bdc9ca;
  font-size: .9rem;
  line-height: 1.55;
}

.chronicle-panel {
  overflow: hidden;
  border: 2px solid #567180;
  outline: 1px solid #071016;
  outline-offset: 4px;
  background: #d8c18d;
  box-shadow: 0 15px 28px #000a;
}

.chronicle-heading {
  position: relative;
  padding: 2.3rem 2rem 2rem;
  border-bottom: 2px solid #b88b3e;
  background:
    radial-gradient(ellipse at 50% -70%, #4a7387 0, transparent 68%),
    repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 4px),
    linear-gradient(#1c3441, #0a151d 72%);
  text-align: center;
}

.chronicle-heading::before,
.chronicle-heading::after {
  position: absolute;
  bottom: -8px;
  width: 13px;
  height: 13px;
  border: 2px solid #c59c4d;
  background: #1b3039;
  box-shadow: inset 0 0 0 2px #071016;
  content: "";
  transform: rotate(45deg);
}

.chronicle-heading::before { left: 1rem; }
.chronicle-heading::after { right: 1rem; }

.chronicle-heading .eyebrow { color: #a9c7d1; }

.chronicle-heading h1 {
  margin: .45rem 0 .75rem;
  color: #efd27f;
  font-size: clamp(2.7rem, 7vw, 5.2rem);
  letter-spacing: .025em;
  line-height: .92;
  text-shadow: 0 2px #3d200d, 0 4px #0a1015, 0 8px 16px #000;
  text-transform: uppercase;
}

.chronicle-heading > p:last-child {
  max-width: 38rem;
  margin: 0 auto;
  color: #d1d4c4;
  font-size: 1.02rem;
  line-height: 1.5;
}

.chronicle-content {
  padding: clamp(1.2rem, 4vw, 2.3rem);
  background:
    linear-gradient(90deg, #8d623522, transparent 12%, transparent 88%, #8d623522),
    repeating-linear-gradient(-7deg, #ead49c 0 3px, #d7b878 3px 7px, #e2c88d 7px 12px);
}

.hall-introduction {
  padding: 1.3rem 1.4rem 1.45rem;
  border: 1px solid #9b7139;
  outline: 1px solid #e8ce94;
  outline-offset: -5px;
  background: #e9d39cbb;
  box-shadow: inset 0 0 0 4px #78532d, inset 0 0 18px #76522745;
  color: #382317;
  text-align: center;
  text-shadow: none;
}

.hall-introduction h2 {
  margin: 0 0 .8rem;
  color: #582717;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-shadow: 0 1px #f7e6bb;
}

.hall-introduction p {
  max-width: 41rem;
  margin: 0 auto;
  line-height: 1.65;
}

.hall-introduction .button { margin-top: 1.25rem; }
.hall-introduction .hint { color: #674b30; }

.chronicle-content .intro-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  padding: 2.35rem 0 .25rem;
}

.chronicle-content .intro-grid article {
  min-height: 13.5rem;
  padding: 2.75rem 1rem 1.25rem;
  border-color: #9a713d;
  box-shadow: inset 0 0 0 4px #76532d, inset 0 0 12px #79582f66, 0 4px 9px #0005;
}

.status-rail { padding: .6rem; }

.status-card {
  margin: .35rem;
  padding: 1rem .9rem;
  border: 1px solid #587583;
  background: linear-gradient(145deg, #1e3540, #0c171f);
  box-shadow: inset 0 0 0 2px #091016;
}

.status-card + .status-card { margin-top: .75rem; }

.status-card h2 {
  margin: 0 0 .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid #a88139;
  color: #dfc77f;
  font-size: 1.05rem;
  text-align: center;
}

.status-card dl { margin: 0; }

.status-card dl div {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid #6d829022;
}

.status-card dl div:last-child { border-bottom: 0; }
.status-card dt { color: #9eb4b9; font-family: system-ui, sans-serif; font-size: .75rem; }
.status-card dd { margin: 0; color: #e4c97e; font-size: .83rem; text-align: right; }
.status-note p { margin: 0 0 .9rem; color: #c0cbcb; font-size: .88rem; line-height: 1.55; }

.status-note a {
  display: block;
  padding: .55rem .4rem;
  border: 1px solid #a8843f;
  background: linear-gradient(#6c3823, #3f1711);
  color: #f4d889;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.status-note a:hover { background: linear-gradient(#855038, #552016); color: #fff0b8; }

@media (max-width: 68rem) {
  .guild-portal { grid-template-columns: minmax(10.5rem, .75fr) minmax(0, 2fr); }
  .status-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .status-card, .status-card + .status-card { margin: 0; }
}

@media (max-width: 48rem) {
  .guild-portal { grid-template-columns: 1fr; padding-top: 2.6rem; }
  .crest-rail { position: static; display: grid; grid-template-columns: 7rem 1fr; column-gap: 1rem; text-align: left; }
  .crest-frame { grid-row: span 4; width: 7rem; margin: 0; }
  .crest-divider, .crest-copy { grid-column: 1 / -1; }
  .crest-divider { margin: .85rem 0; }
  .chronicle-content .intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .chronicle-content .intro-grid article { min-height: auto; }
  .status-rail { grid-template-columns: 1fr; }
}

/* Modern guild portal with a classic three-column information architecture.
   All textures and UI treatment below are original CSS; no Blizzard art assets are used. */
.site-header {
  min-height: 3.35rem;
  padding: .35rem .9rem;
  border-color: #58727f;
  background:
    repeating-linear-gradient(0deg, #ffffff0a 0 1px, transparent 1px 4px),
    linear-gradient(#294654, #0a141b 52%, #1b303a);
}

.site-header::before,
.site-header::after { bottom: -6px; width: 12px; height: 12px; border-width: 2px; }
.brand { font-size: 1rem; letter-spacing: .08em; }
.brand small { margin-top: .3rem; color: #a9c5cf; font-size: .5rem; }
.site-header nav { font-size: .72rem; }
.site-header nav a,
.text-button { min-height: 1.85rem; padding: .42rem .58rem; }

.classic-guild-layout {
  display: grid;
  grid-template-columns: minmax(11.5rem, .72fr) minmax(0, 2.35fr) minmax(12.75rem, .8fr);
  gap: .85rem;
  align-items: start;
  padding: 3.35rem 0 5rem;
}

.classic-nav,
.classic-quick-rail {
  border: 1px solid #4b6978;
  background:
    repeating-linear-gradient(0deg, #ffffff09 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #264451, #0a151d 58%, #1b3039);
  box-shadow: inset 0 0 0 2px #071016, inset 0 0 0 4px #263d48, 0 12px 25px #000a;
}

.classic-nav {
  position: sticky;
  top: 1.2rem;
  padding: .5rem;
}

.official-game-mark {
  margin: -.3rem 0 .3rem;
  padding: .3rem .15rem .1rem;
  border-bottom: 1px solid #557380;
  text-align: center;
}

.official-game-mark img {
  display: block;
  width: min(100%, 10.25rem);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 5px #000c);
}

.landing-rail-copy {
  margin: .7rem .15rem .25rem;
  padding: .9rem .75rem 1rem;
  color: #d8c9d2;
  font-size: .88rem;
  line-height: 1.55;
  text-align: center;
}

.landing-rail-copy p { margin: 0; }
.landing-rail-copy .rail-kicker { color: #e5c77d; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.landing-rail-copy span { display: block; height: 1px; margin: .8rem .25rem; background: linear-gradient(90deg, transparent, #b37b4a, transparent); }
.landing-rail-copy .rail-note { color: #c4adbe; font-size: .78rem; font-style: italic; }

.section-menu section + section { margin-top: .78rem; }

.section-menu h2 {
  position: relative;
  margin: 0;
  padding: .48rem .7rem .46rem 1.8rem;
  border: 1px solid #547482;
  background: linear-gradient(#315260, #11232c 50%, #223d48);
  color: #e2c878;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .8rem;
  letter-spacing: .04em;
  text-shadow: 0 1px #111;
  text-transform: uppercase;
}

.section-menu h2::before {
  position: absolute;
  top: 50%;
  left: .65rem;
  width: .52rem;
  height: .52rem;
  border: 1px solid #dbbd64;
  background: #18323e;
  box-shadow: inset 0 0 0 1px #081015;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.section-menu a,
.section-menu .menu-placeholder {
  position: relative;
  display: block;
  margin: .12rem 0;
  padding: .45rem .62rem .45rem 1.52rem;
  border-left: 1px solid transparent;
  color: #c7d3d3;
  font-size: .89rem;
  line-height: 1.25;
  text-decoration: none;
}

.section-menu a::before,
.section-menu .menu-placeholder::before {
  position: absolute;
  top: .82rem;
  left: .6rem;
  width: .33rem;
  height: .33rem;
  border: 1px solid #97b5bd;
  background: #1d3e4a;
  box-shadow: 0 0 3px #000;
  content: "";
  transform: rotate(45deg);
}

.section-menu a:hover,
.section-menu a.is-current {
  border-left-color: #d5b45c;
  background: linear-gradient(90deg, #4b6c7844, transparent);
  color: #ffe5a1;
}

.section-menu a:hover::before,
.section-menu a.is-current::before { border-color: #f1d171; background: #b17a29; }
.section-menu a small,
.section-menu .menu-placeholder small { color: #85a4ad; font-family: system-ui, sans-serif; font-size: .63rem; text-transform: uppercase; }
.section-menu .menu-placeholder { color: #94a6a9; cursor: default; }

.nav-footnote {
  margin: 1.25rem .45rem .35rem;
  color: #8fa7ad;
  font-size: .77rem;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

.classic-main {
  overflow: hidden;
  border: 2px solid #567483;
  outline: 1px solid #071016;
  outline-offset: 4px;
  background: #dec38d;
  box-shadow: 0 16px 30px #000b;
}

.guild-masthead {
  position: relative;
  min-height: 17.2rem;
  padding: 1rem 1rem 1.6rem;
  border-bottom: 2px solid #b78d40;
  background:
    radial-gradient(ellipse at 50% 13%, #577f91 0, transparent 38%),
    linear-gradient(125deg, #0b1a24, #193846 48%, #071016);
  text-align: center;
}

.guild-masthead::before,
.guild-masthead::after {
  position: absolute;
  bottom: -8px;
  width: 13px;
  height: 13px;
  border: 2px solid #d0ab53;
  background: #1a3440;
  box-shadow: inset 0 0 0 2px #071016;
  content: "";
  transform: rotate(45deg);
}

.guild-masthead::before { left: 1.1rem; }
.guild-masthead::after { right: 1.1rem; }

.realm-ribbon {
  display: inline-block;
  margin: 0;
  padding: .35rem .9rem;
  border-top: 1px solid #5b7783;
  border-bottom: 1px solid #5b7783;
  color: #b8d0d5;
  font-family: system-ui, sans-serif;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.guild-crest-plaque {
  position: absolute;
  z-index: 1;
  top: 1.75rem;
  left: 50%;
  width: clamp(8.5rem, 22vw, 11.5rem);
  padding: .22rem;
  border: 1px solid #c7a34b;
  border-radius: 50%;
  background: #071016;
  box-shadow: 0 8px 15px #000b, inset 0 0 0 2px #2f5261;
  transform: translateX(-50%);
}

.guild-crest-plaque img { display: block; width: 100%; height: auto; border-radius: 50%; }

.guild-masthead-copy { padding-top: 10rem; }

.guild-masthead h1 {
  margin: 0;
  color: #f0d17b;
  font-size: clamp(2.25rem, 6vw, 4.2rem);
  letter-spacing: .03em;
  line-height: .94;
  text-shadow: 0 2px #432715, 0 4px #071016, 0 8px 15px #000;
  text-transform: uppercase;
}

.guild-masthead-copy p {
  margin: .62rem 0 0;
  color: #b2ccd2;
  font-family: system-ui, sans-serif;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.classic-parchment {
  padding: clamp(1.2rem, 4vw, 2.3rem);
  background:
    linear-gradient(90deg, #865f3622, transparent 12%, transparent 88%, #865f3622),
    repeating-linear-gradient(-7deg, #efdca8 0 3px, #d8bb80 3px 7px, #e7cd95 7px 12px);
}

.classic-parchment .hall-introduction { scroll-margin-top: 1rem; }
.page-kicker { margin: 0 0 .45rem; color: #795326; font-family: system-ui, sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.classic-parchment .intro-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  padding: .25rem 0;
}

.classic-parchment .intro-grid article {
  min-height: 13.5rem;
  padding: 2.75rem 1rem 1.25rem;
  border-color: #9a713d;
  box-shadow: inset 0 0 0 4px #76532d, inset 0 0 12px #79582f66, 0 4px 9px #0005;
}

.classic-parchment .wip-notice {
  position: relative;
  min-height: clamp(15rem, 28vw, 20rem);
  padding: clamp(3rem, 8vw, 5.25rem) 1.5rem;
  border: 2px solid #9a713d;
  outline: 1px solid #4e2d1b;
  outline-offset: -7px;
  background:
    radial-gradient(ellipse at 50% 0, #fff2ca80, transparent 55%),
    linear-gradient(90deg, #8b653a22, transparent 15%, transparent 85%, #8b653a22),
    repeating-linear-gradient(-6deg, #e8ce98 0 3px, #d6b97f 3px 7px, #e3c68e 7px 12px);
  box-shadow: inset 0 0 0 4px #76532d, inset 0 0 16px #79582f77, 0 7px 14px #0008;
  color: #4b3420;
  text-align: center;
  text-shadow: none;
}

.classic-main > .classic-parchment.home-wip-sheet {
  --home-wip-sheet-height: clamp(24rem, 40vw, 31rem);
  min-height: var(--home-wip-sheet-height);
  padding: 0;
  background: #e8c985 url("/static/images/about-story-arcane-parchment-page-v2.png") center / 100% 100% no-repeat;
  color: #4b3420;
  text-shadow: none;
}

.classic-main > .classic-parchment.home-wip-sheet .wip-notice {
  display: grid;
  align-content: center;
  box-sizing: border-box;
  min-height: var(--home-wip-sheet-height);
  padding: clamp(3.25rem, 9vw, 6rem) clamp(2rem, 10vw, 8rem);
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.wip-notice::before,
.wip-notice::after {
  position: absolute;
  top: .8rem;
  width: 22%;
  max-width: 10rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8d6032, transparent);
  content: "";
}

.wip-notice::before { left: 12%; }
.wip-notice::after { right: 12%; }

.wip-notice .page-kicker { margin-bottom: .65rem; }

.wip-notice h2 {
  margin: 0;
  color: #572414;
  font-family: var(--va-display-face);
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: .045em;
  text-shadow: 0 1px #f8e3b7;
}

.wip-notice h2::after {
  display: block;
  width: 4rem;
  height: 2px;
  margin: .85rem auto 1rem;
  background: linear-gradient(90deg, transparent, #8a5626, transparent);
  content: "";
}

.wip-notice .wip-summary {
  max-width: 40rem;
  margin: 0 auto;
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.65;
}

.wip-notice .wip-availability {
  max-width: 40rem;
  margin: 1.35rem auto 0;
  padding-top: 1.15rem;
  border-top: 1px solid #8c603766;
  color: #4f3522;
  font: 700 clamp(.92rem, 1.7vw, 1.08rem)/1.6 system-ui, sans-serif;
}

.classic-quick-rail { padding: .55rem; }

.quick-card {
  margin: .35rem;
  padding: 1rem .9rem;
  border: 1px solid #587583;
  background: linear-gradient(145deg, #1e3540, #0c171f);
  box-shadow: inset 0 0 0 2px #091016;
}

.quick-card + .quick-card { margin-top: .75rem; }
.status-note { min-height: 12rem; }

.quick-card h2 {
  margin: 0 0 .85rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid #a88139;
  color: #dfc77f;
  font-size: 1.05rem;
  text-align: center;
}

.quick-card dl { margin: 0; }
.quick-card dl div { display: flex; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid #6d829022; }
.quick-card dl div:last-child { border-bottom: 0; }
.quick-card dt { color: #9eb4b9; font-family: system-ui, sans-serif; font-size: .75rem; }
.quick-card dd { margin: 0; color: #e4c97e; font-size: .83rem; text-align: right; }
.quick-card p { margin: 0 0 .9rem; color: #c0cbcb; font-size: .88rem; line-height: 1.55; }

.quick-card a {
  display: block;
  padding: .55rem .4rem;
  border: 1px solid #a8843f;
  background: linear-gradient(#6c3823, #3f1711);
  color: #f4d889;
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.quick-card a:hover { background: linear-gradient(#855038, #552016); color: #fff0b8; }
.quick-login { border-color: #4e7180; background: linear-gradient(145deg, #19333e, #0a151c); }

footer small {
  display: block;
  max-width: 62rem;
  margin: .85rem auto 0;
  color: #80979d;
  font-family: system-ui, sans-serif;
  font-size: .65rem;
  line-height: 1.45;
  text-transform: none;
}

footer small a { color: #a7cad5; }

/* Forever name reservations remain a calm, optional prompt after Battle.net
   sign-in. The browser owns dismissal; the server shows it again only after a
   later login while the account has no saved reservation. */
.reservation-heading { max-width: 58rem; }

.reservation-panel,
.reservation-admin-panel {
  max-width: 58rem;
  border-color: #9d7047;
  background:
    radial-gradient(ellipse at 50% 0, #6a3a8044, transparent 55%),
    linear-gradient(145deg, #17141ddd, #090a10ee 70%);
  color: #ded3d1;
}

.reservation-panel h2 { color: #f1cb79; }
.reservation-panel > p:not(.page-kicker) { max-width: 48rem; color: #d2c6c6; line-height: 1.65; }
.reservation-form { max-width: 30rem; margin-top: 1.35rem; }
.reservation-form .field-note { margin: -.35rem 0 .1rem; color: #bcaeb6; font: .78rem/1.4 system-ui, sans-serif; }
.reservation-withdraw { margin-top: 1rem; }
.reservation-withdraw .text-button { padding: 0; border: 0; background: transparent; color: #dbb3b3; text-decoration: underline; }
.reservation-withdraw .text-button:hover { color: #ffd6d1; }
.reservation-admin-link { margin-top: 1.65rem; font: 700 .86rem system-ui, sans-serif; }
.reservation-admin-link a { color: #f0c66d; }

.reservation-dialog {
  width: min(calc(100vw - 1.25rem), 48rem);
  max-height: calc(100dvh - 1.25rem);
  box-sizing: border-box;
  overflow-y: auto;
  border: 2px solid #6d3d20;
  outline: 1px solid #e6bd72;
  background:
    linear-gradient(#ffe8b87a, #e9bf7069),
    url("/static/images/about-story-arcane-parchment-page-v2.png") center / 100% 100% no-repeat;
  color: #4d3020;
  box-shadow: inset 0 0 0 2px #f8d69380, 0 1.5rem 4rem #000d, 0 0 2rem #743d8166;
  padding: clamp(3.25rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5.75rem) clamp(2rem, 5vw, 3.5rem);
}

.reservation-dialog::backdrop { background: #06050ab8; backdrop-filter: blur(.2rem); }
.reservation-dialog .eyebrow { color: #6a3b22; text-shadow: none; }
.reservation-dialog h2 { margin: .35rem 2rem .8rem 0; color: #592d1a; font-size: clamp(1.65rem, 4vw, 2.35rem); line-height: 1.08; text-shadow: 0 1px #ffe6b6; }
.reservation-dialog > p:not(.eyebrow) { margin: 0; color: #4d3322; line-height: 1.55; text-shadow: 0 1px #fff0cb; }
.reservation-dialog .reservation-form { margin-top: 1.35rem; }
.dialog-dismiss-form { position: absolute; top: .65rem; right: .65rem; margin: 0; }
.dialog-dismiss {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid #7c4325;
  border-radius: 50%;
  background: linear-gradient(145deg, #7b301f, #3d1714);
  color: #ffe09a;
  font: 700 1.4rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.dialog-dismiss:hover,
.dialog-dismiss:focus-visible { border-color: #fff0bc; background: #9a4829; outline: 0; }

.reservation-admin-table { display: grid; gap: .1rem; }
.reservation-admin-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 1.2fr) minmax(10rem, 1.1fr);
  gap: 1rem;
  align-items: center;
  padding: .85rem 0;
  border-top: 1px solid #be925440;
  color: #d9ccd3;
  font: .88rem/1.35 system-ui, sans-serif;
}
.reservation-admin-row strong { color: #f0c66d; font-family: var(--va-display-face); font-size: 1.05rem; letter-spacing: .035em; }
.reservation-admin-row--head { border-top: 0; color: #bda97f; font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 38rem) {
  .reservation-admin-row { grid-template-columns: 1fr; gap: .25rem; }
  .reservation-admin-row--head { display: none; }
}

/* Gildenaddons: the same parchment storytelling frame as the guild history,
   with compact cards for tools and a readable FAQ. */
.addons-sheet {
  min-height: 100%;
  padding-inline: clamp(3rem, 7vw, 6.5rem);
  background: #e8c985 url("/static/images/about-story-arcane-parchment-page-v2.png") center / 100% 100% no-repeat;
  color: #4b3420;
  text-shadow: none;
}

.addons-masthead {
  position: relative;
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem clamp(1.8rem, 4vw, 2.65rem);
  border-bottom: 1px solid #8c60374d;
  text-align: center;
}

.addons-masthead h1 {
  margin: .5rem 0 .65rem;
  color: #572414;
  font-family: var(--va-display-face);
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: .95;
  letter-spacing: .055em;
  text-shadow: 0 1px #f8e3b7;
}

.addons-masthead > p:last-child {
  margin: 0;
  color: #4b3420;
  font-size: clamp(1.05rem, 1.7vw, 1.27rem);
  line-height: 1.6;
}

.addons-introduction {
  max-width: 48rem;
  margin: 2.2rem auto 1.8rem;
  text-align: center;
}

.addons-introduction h2,
.addon-card h2,
.addon-detail h2 {
  margin: 0;
  color: #643220;
  font-family: var(--va-display-face);
  letter-spacing: .025em;
  text-shadow: 0 1px #f8e3b7;
}

.addons-introduction h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }

.addons-introduction p:last-child,
.addon-card p,
.addon-detail section p,
.addon-faq details p {
  color: #4b3420;
  font-size: 1.02rem;
  line-height: 1.62;
}

.addon-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 auto 2rem;
}

.addon-card {
  display: flex;
  flex-direction: column;
  min-height: 16.5rem;
  padding: 1.35rem;
  border: 1px solid #90633d;
  outline: 1px solid #efd9a780;
  outline-offset: -5px;
  background:
    radial-gradient(ellipse at 50% 0, #fff1c677 0, transparent 58%),
    linear-gradient(145deg, #efd9a4, #d1b273);
  box-shadow: inset 0 0 0 3px #71472a, inset 0 0 18px #79582f55, 0 .4rem .8rem #4d2d1d55;
}

.addon-card .page-kicker { margin-bottom: .6rem; }
.addon-card h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.addon-card p:not(.page-kicker) { margin: .85rem 0 1.25rem; }

.addon-card-link,
.addon-back-link a {
  color: #6f2819;
  font-family: system-ui, sans-serif;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.addon-card-link { margin-top: auto; }
.addon-card-link:hover,
.addon-back-link a:hover { color: #3e170f; }

.addon-directory { grid-template-columns: minmax(0, 42rem); justify-content: center; }
.addon-card--collector { min-height: 14rem; }
.addon-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem 1.15rem;
  margin-top: auto;
}
.addon-card-actions .button {
  min-width: 0;
  padding: .58rem 1rem;
  font-size: .78rem;
  text-align: center;
}
.addon-card-actions .addon-card-link { margin-top: 0; }

.addon-detail section {
  max-width: 50rem;
  margin: 0 auto;
  padding: 1.35rem 0;
  border-top: 1px solid #8c60374d;
}

.addon-detail section:first-of-type { margin-top: 1rem; }
.addon-detail h2 { font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.addon-detail section p { margin: .55rem 0 0; }
.addon-back-link { margin: 1.6rem auto .35rem; text-align: center; }

.addon-faq { padding-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.addon-faq details {
  max-width: 50rem;
  margin: 0 auto;
  padding: .1rem 0;
  border-top: 1px solid #8c60374d;
}
.addon-faq details:first-of-type { margin-top: 1.3rem; }
.addon-faq details:last-of-type { border-bottom: 1px solid #8c60374d; }
.addon-faq summary {
  padding: 1rem .1rem;
  color: #643220;
  cursor: pointer;
  font-family: var(--va-display-face);
  font-size: clamp(1.16rem, 2vw, 1.45rem);
  letter-spacing: .025em;
}
.addon-faq details p { margin: 0 0 1.1rem; }

@media (max-width: 64rem) {
  .addon-directory { grid-template-columns: 1fr; max-width: 39rem; }
  .addon-card { min-height: auto; }
}

@media (max-width: 48rem) {
  .addons-sheet { padding-inline: 1.3rem; background-size: auto 100%; }
  .addons-masthead { padding-inline: .3rem; }
  .addons-introduction { text-align: left; }
  .addon-card { padding: 1.2rem; }
}
footer small a:hover { color: #f2d889; }

.footer-legal-link {
  display: inline-block;
  margin-left: .7rem;
  color: #e4c47b;
  font-size: .74rem;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.footer-legal-link:hover { color: #fff0bf; text-decoration: underline; }

@media (max-width: 68rem) {
  .classic-guild-layout { grid-template-columns: minmax(10.5rem, .75fr) minmax(0, 2fr); }
  .classic-quick-rail { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
  .quick-card, .quick-card + .quick-card { margin: 0; }
}

@media (max-width: 48rem) {
  .classic-guild-layout { grid-template-columns: 1fr; padding-top: 2.6rem; }
  .classic-nav { position: static; }
  .section-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
  .section-menu section + section { margin-top: 0; }
  .section-menu h2 { font-size: .68rem; }
  .section-menu a,
  .section-menu .menu-placeholder { font-size: .8rem; }
  .classic-quick-rail { grid-template-columns: 1fr; }
  .classic-parchment .intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .classic-parchment .intro-grid article { min-height: auto; }
}

@media (max-width: 34rem) {
  .section-menu { grid-template-columns: 1fr; }
  .site-header nav { width: 100%; }
  .site-header nav a, .text-button { flex: 1 1 auto; text-align: center; }
}

/* Atmospheric scene layer. The background is an original project asset, while
   the content surfaces deliberately stay calm and readable above it. */
body {
  background-color: #061019;
  background-image:
    linear-gradient(90deg, #03090dcc 0%, #07121a42 22%, #07121a26 78%, #03090dcc 100%),
    linear-gradient(180deg, #02080b77 0%, transparent 28rem, #02070ba8 100%),
    url("/static/images/dalaran-trailer-still.png");
  background-position: center, center, center top;
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-attachment: fixed;
}

body::before {
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 12rem, transparent 0 26rem, #02070b44 46rem, #010407b8 84rem),
    linear-gradient(90deg, #01060980, transparent 18%, transparent 82%, #01060980);
  mix-blend-mode: normal;
}

body::after {
  border-color: #4d6b76;
  box-shadow: inset 0 0 0 2px #050b0f, inset 0 0 0 4px #203943, 0 0 0 1px #000;
}

.site-header {
  background: linear-gradient(180deg, #2b4b58ee, #0a151cee 52%, #1a2f38ee);
  box-shadow: inset 0 0 0 2px #071016, inset 0 -2px #ae873d, 0 8px 22px #000c;
}

.classic-nav,
.classic-quick-rail {
  background: linear-gradient(145deg, #1c3640ef, #071218f2 58%, #152b34ef);
  box-shadow: inset 0 0 0 2px #071016, inset 0 0 0 4px #294752, 0 13px 28px #000b;
}

.classic-main {
  box-shadow: 0 17px 34px #000c, inset 0 0 0 1px #99bdc755;
}

.guild-masthead {
  background:
    radial-gradient(ellipse at 50% 0, #547d8c88 0, transparent 49%),
    linear-gradient(125deg, #07131b, #183942 50%, #050d13);
}

.classic-parchment {
  background:
    radial-gradient(ellipse at 20% 5%, #fff1c866 0, transparent 32%),
    radial-gradient(ellipse at 80% 90%, #8e603422 0, transparent 40%),
    linear-gradient(105deg, #d8bc82, #efd9a2 42%, #dbbd82 100%);
}

.hall-introduction,
.classic-parchment .intro-grid article {
  background:
    radial-gradient(ellipse at 50% 0, #fff0c577 0, transparent 46%),
    linear-gradient(145deg, #efd9a4, #d4b777);
}

.section-menu h2 {
  background: linear-gradient(180deg, #345765, #12242d 55%, #1e3843);
}

@media (max-width: 48rem) {
  body { background-attachment: scroll; background-position: center, center, 54% top; }
}

/* Dalaran twilight palette: warm stone, aged bronze and restrained arcane violet. */
body::after {
  border-color: #6b556c;
  box-shadow: inset 0 0 0 2px #09080d, inset 0 0 0 4px #3b2c40, 0 0 0 1px #000;
}

.site-header {
  border-color: #765b69;
  background: linear-gradient(180deg, #34293aee, #15131bee 52%, #2b202eee);
  box-shadow: inset 0 0 0 2px #0b0a0e, inset 0 -2px #b37d48, 0 8px 22px #000c;
}

.site-header nav a,
.text-button {
  border-color: #765c68;
  background: linear-gradient(#4b3749, #211923 52%, #382735);
  box-shadow: inset 0 1px #8f7082, 0 2px 3px #0009;
}

.site-header nav a:hover,
.text-button:hover {
  border-color: #e0b26b;
  background: linear-gradient(#604559, #2d202e 52%, #4b3042);
  color: #fff0c1;
}

.brand small { color: #d2b3c9; }

.classic-nav,
.classic-quick-rail {
  border-color: #6e586e;
  background: linear-gradient(145deg, #2b2531ed, #100f16f2 58%, #261c2bed);
  box-shadow: inset 0 0 0 2px #0a090e, inset 0 0 0 4px #49374c, 0 13px 28px #000b;
}

.classic-main {
  border-color: #806475;
  outline-color: #0a090d;
  box-shadow: 0 17px 34px #000c, inset 0 0 0 1px #d4a07845;
}

.official-game-mark { border-bottom-color: #725a6e; }

.section-menu h2 {
  border-color: #705c6e;
  background: linear-gradient(180deg, #4a394e, #211a26 55%, #392a3d);
}

.section-menu h2::before { border-color: #e2b366; background: #422d47; }
.section-menu a,
.section-menu .menu-placeholder { color: #d3c5cd; }
.section-menu a::before,
.section-menu .menu-placeholder::before { border-color: #bba4b7; background: #5b3d5f; }
.section-menu a:hover,
.section-menu a.is-current { border-left-color: #dfb467; background: linear-gradient(90deg, #7b516344, transparent); color: #ffe6af; }
.section-menu a:hover::before,
.section-menu a.is-current::before { border-color: #f2ce77; background: #bf7945; }
.section-menu a small,
.section-menu .menu-placeholder small { color: #c0a5be; }
.section-menu .menu-placeholder { color: #9d8c9b; }
.nav-footnote { color: #c1a9bb; }

.guild-masthead {
  border-bottom-color: #bc8751;
  background:
    radial-gradient(ellipse at 50% 0, #80518073 0, transparent 49%),
    linear-gradient(125deg, #120f17, #302137 50%, #0b0a10);
}

.guild-masthead::before,
.guild-masthead::after { border-color: #d7a45c; background: #39263f; }
.realm-ribbon { border-color: #70566c; color: #dfbdd6; }
.guild-crest-plaque { border-color: #d0a557; background: #100d13; box-shadow: 0 8px 15px #000b, inset 0 0 0 2px #704969; }
.guild-masthead-copy p { color: #dabed6; }

.classic-parchment {
  background:
    radial-gradient(ellipse at 20% 5%, #fff2d066 0, transparent 32%),
    radial-gradient(ellipse at 80% 90%, #9a5d4522 0, transparent 40%),
    linear-gradient(105deg, #c9a87e, #ead0a2 42%, #cba77b 100%);
}

.hall-introduction,
.classic-parchment .intro-grid article {
  border-color: #936646;
  background:
    radial-gradient(ellipse at 50% 0, #fff2cf77 0, transparent 46%),
    linear-gradient(145deg, #ebd3a7, #c8a477);
  box-shadow: inset 0 0 0 4px #785035, inset 0 0 12px #79582f55, 0 4px 9px #0005;
}

.quick-card {
  border-color: #705a70;
  background: linear-gradient(145deg, #302633, #121018);
  box-shadow: inset 0 0 0 2px #0b0a0f;
}

.quick-card h2 { border-bottom-color: #b9804a; color: #e6c77f; }
.quick-card dt { color: #c3afc0; }
.quick-card dd { color: #e5c580; }
.quick-card p { color: #d0c1ca; }
.quick-login { border-color: #775d75; background: linear-gradient(145deg, #2b2031, #100e15); }

/* Keep the masthead in document flow so its four layers cannot collide. */
.guild-masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 1.15rem 1rem 1.7rem;
}

.realm-ribbon {
  flex: 0 0 auto;
  margin: 0 0 .9rem;
}

.guild-crest-plaque {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  width: clamp(7.75rem, 16vw, 10.5rem);
  margin: 0 auto 1rem;
  transform: none;
}

.guild-masthead-copy { padding-top: 0; }

@media (max-width: 34rem) {
  .guild-masthead { padding-inline: .65rem; }
  .realm-ribbon { margin-bottom: .7rem; font-size: .55rem; letter-spacing: .11em; }
  .guild-crest-plaque { width: 7.5rem; margin-bottom: .8rem; }
}

/* Compact section heads and content frames for forum, applications and notices. */
.subpage-heading {
  max-width: 58rem;
  min-height: 0;
  margin: clamp(2rem, 5vw, 3.6rem) auto 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.15rem, 4vw, 3rem) clamp(1.35rem, 3vw, 2.1rem);
  border-color: #806475;
  outline-color: #0a090d;
  background:
    radial-gradient(ellipse at 50% 0, #80518055 0, transparent 62%),
    linear-gradient(125deg, #130f18, #302137 54%, #0d0a10);
  box-shadow: inset 0 0 0 3px #251827, inset 0 -1px #bc8751, 0 13px 28px #000b;
  text-align: center;
}

.subpage-heading::before { display: none; }
.subpage-heading.compact { padding-bottom: clamp(1.25rem, 3vw, 2.1rem); }

.subpage-heading .eyebrow {
  color: #dfbdd6;
  font-size: .65rem;
  letter-spacing: .17em;
}

.subpage-heading h1 {
  max-width: 100%;
  margin: .45rem auto .65rem;
  color: #f0d17b;
  font-size: clamp(2rem, 5vw, 3.65rem);
  line-height: 1;
  text-shadow: 0 2px #432715, 0 4px #100b12, 0 8px 15px #000;
}

.subpage-heading > p {
  max-width: 45rem;
  margin: 0 auto;
  color: #ddced5;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.55;
}

.subpage-heading .back-link {
  display: inline-block;
  margin-bottom: .45rem;
  color: #d9b76d;
}

main > .panel,
main > .thread-list,
main > .posts,
main > .notice {
  width: min(100%, 58rem);
  margin-right: auto;
  margin-left: auto;
}

main > .panel {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  border-color: #936646;
  background:
    radial-gradient(ellipse at 50% 0, #fff2cf77 0, transparent 46%),
    linear-gradient(145deg, #ebd3a7, #c8a477);
  box-shadow: inset 0 0 0 4px #785035, inset 0 0 12px #79582f55, 0 7px 16px #0008;
}

main > .notice { margin-top: 1.5rem; }
main > .thread-list { padding: 1.35rem 0 5rem; }
main > .posts { margin-top: 1.5rem; margin-bottom: 2rem; }

.privacy-heading { margin-bottom: 1.2rem; }

.privacy-content {
  width: min(100% - 2.4rem, 58rem);
  margin: 0 auto 4rem;
  padding: clamp(1.35rem, 4vw, 2.7rem);
  border-color: #936646;
  background:
    radial-gradient(ellipse at 50% 0, #fff2cf77 0, transparent 46%),
    linear-gradient(145deg, #ebd3a7, #c8a477);
  box-shadow: inset 0 0 0 4px #785035, inset 0 0 12px #79582f55, 0 7px 16px #0008;
  color: #352016;
  font-size: 1rem;
  line-height: 1.65;
}

.privacy-content h2 {
  margin: 2.35rem 0 .65rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #9a713d;
  color: #5a281a;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  text-shadow: 0 1px #f8dfae;
}

.privacy-content h2:first-of-type { margin-top: 1rem; }
.privacy-content p { max-width: 52rem; margin: 0 0 1rem; }
.privacy-content ul { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.privacy-content li + li { margin-top: .4rem; }
.privacy-content address { margin: 0 0 1rem; font-style: normal; line-height: 1.6; }
.privacy-content a { color: #733822; font-weight: 700; }
.privacy-content a:hover { color: #3e170f; }
.privacy-updated { color: #745333; font-family: system-ui, sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.thread-list h2 {
  margin-bottom: .9rem;
  color: #f0d17b;
  font-size: clamp(1.35rem, 3vw, 2rem);
  text-align: center;
}

.thread-row {
  border-color: #6e586e;
  background: linear-gradient(100deg, #2b2531ed, #120f17f2 64%, #241a29ed);
  box-shadow: inset 0 0 0 1px #0b0a0f;
}

.thread-row::before { border-color: #d8af62; background: #5d3d60; }
.thread-row:hover { background: linear-gradient(100deg, #4b354a, #211822 64%, #3a293d); }
.thread-row strong { color: #f0d17b; }
.thread-row small,
.thread-row time { color: #d1bbc8; }

.post {
  border-color: #936646;
  background:
    radial-gradient(ellipse at 50% 0, #fff2cf77 0, transparent 46%),
    linear-gradient(145deg, #ebd3a7, #c8a477);
  box-shadow: inset 0 0 0 4px #785035, inset 0 0 12px #79582f55, 0 7px 16px #0008;
}

@media (max-width: 38rem) {
  .subpage-heading { margin-top: 2.25rem; }
  main > .panel,
  main > .thread-list,
  main > .posts,
  main > .notice { width: min(100%, 100% - 1.4rem); }
  .privacy-content { width: min(100% - 1.4rem, 58rem); }
}

/* Visio Aeterna display lettering.
   This is an original CSS treatment for the site's display hierarchy, not a
   recreated Blizzard typeface. Body copy deliberately keeps its readable serif. */
:root {
  --va-display-face: "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

.brand,
.guild-masthead h1,
.subpage-heading h1,
.section-menu h2,
.quick-card h2 {
  font-family: var(--va-display-face);
  font-weight: 800;
  font-variant-caps: all-small-caps;
  text-rendering: optimizeLegibility;
}

.brand,
.section-menu h2,
.quick-card h2 {
  letter-spacing: .115em;
  text-shadow: 0 1px #fff0bf55, 0 2px #54291f, 0 3px #100b0e, 0 5px 8px #000b;
}

.guild-masthead h1,
.subpage-heading h1 {
  letter-spacing: .075em;
  -webkit-text-stroke: .012em #48241c;
  paint-order: stroke fill;
  text-shadow: 0 1px #fff2c555, 0 2px #a55e32, 0 4px #48241c, 0 6px #100b0e, 0 10px 18px #000c;
}

.section-menu h2 {
  padding-right: 1.2rem;
  border-bottom-color: #b17a4a;
}

.quick-card h2 {
  letter-spacing: .085em;
}

/* The rail keeps its frame, but no longer blocks the Dalaran backdrop. */
.classic-nav {
  border-color: #8c6d85;
  background:
    linear-gradient(145deg, #2a2131c9, #110d17be 56%, #271a2acb);
  box-shadow:
    inset 0 0 0 2px #0a090ed9,
    inset 0 0 0 4px #5a4157d9,
    0 13px 28px #000b;
  backdrop-filter: blur(1.5px) saturate(.9);
}

.landing-rail-copy {
  background: linear-gradient(180deg, #170f1b55, #170f1b20);
  border-bottom-color: #a9775899;
}

/* Each destination gets its own framed, tactile button instead of reading as
   a flat list. The muted variants remain visibly unavailable. */
.section-menu h2 {
  margin: .62rem .16rem .34rem;
  box-shadow: inset 0 1px #d4a47b5c, inset 0 -1px #110d16, 0 2px 4px #0008;
}

.section-menu a,
.section-menu .menu-placeholder {
  margin: .3rem .16rem;
  padding: .56rem .7rem .56rem 1.72rem;
  border: 1px solid #785f76;
  border-left-color: #b28168;
  outline: 1px solid #0d0a10;
  outline-offset: -3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #5a455fbf, #2a1f31ca 53%, #39283fc2);
  box-shadow:
    inset 0 1px #d7a58076,
    inset 0 -1px #120d16,
    0 3px 6px #0009;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.section-menu a::before,
.section-menu .menu-placeholder::before {
  top: 50%;
  left: .68rem;
  transform: translateY(-50%) rotate(45deg);
}

.section-menu .menu-placeholder {
  opacity: .72;
  background: linear-gradient(180deg, #4b3b50a6, #241b2aac 53%, #33233aa8);
}

.section-menu a:hover,
.section-menu a.is-current {
  transform: translateY(-1px);
  border-color: #e1b15f;
  border-left-color: #f0c56f;
  background: linear-gradient(180deg, #765143e6, #442320e8 52%, #2b171ee6);
  box-shadow:
    inset 0 1px #ffe0a594,
    inset 0 -1px #210e12,
    0 5px 10px #000b;
}

/* About page: the same side rails frame a quieter, story-led center panel. */
.about-masthead {
  position: relative;
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem clamp(1.8rem, 4vw, 2.6rem);
  border: 1px solid #6e586e;
  border-bottom: 3px solid #bc8751;
  background:
    radial-gradient(ellipse at 50% 0, #80518073 0, transparent 58%),
    linear-gradient(125deg, #120f17, #302137 50%, #0b0a10);
  box-shadow: 0 12px 23px #000a, inset 0 0 0 2px #0a090e, inset 0 0 0 4px #49374c;
  text-align: center;
}

.about-masthead .realm-ribbon { margin: 0 0 .85rem; }

.about-masthead h1 {
  margin: 0;
  color: #f0d17b;
  font-family: var(--va-display-face);
  font-size: clamp(2rem, 5vw, 3.35rem);
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1;
  text-shadow: 0 1px #fff2c555, 0 2px #a55e32, 0 4px #48241c, 0 7px 14px #000c;
  text-transform: uppercase;
}

.about-masthead > p:last-child {
  max-width: 38rem;
  margin: .8rem auto 0;
  color: #dabed6;
  font-size: clamp(.96rem, 2vw, 1.08rem);
  line-height: 1.5;
}

.about-story {
  position: relative;
  padding-inline: clamp(4.75rem, 8.5vw, 8rem);
  background: #e8c985 url("/static/images/about-story-arcane-parchment-page-v2.png") center / 100% 100% no-repeat;
  color: #4b3420;
  text-shadow: none;
}

.about-story > h2 {
  margin: 0;
  color: #572414;
  font-family: var(--va-display-face);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px #f8e3b7;
}

.about-story > h2::after {
  display: block;
  width: 4.5rem;
  height: 2px;
  margin: .85rem auto 1.25rem;
  background: linear-gradient(90deg, transparent, #8a5626, transparent);
  content: "";
}

.about-story p {
  margin: 0;
  font-size: clamp(1.1rem, 1.52vw, 1.3rem);
  line-height: 1.72;
}

.about-story > .page-kicker { font-size: .7rem; }

.about-story .about-lead {
  max-width: 48rem;
  margin: 0 auto 1.8rem;
  color: #3e2719;
  font-size: clamp(1.2rem, 2.2vw, 1.34rem);
  text-align: center;
}

.about-story section {
  padding: 1.4rem 0;
  border-top: 1px solid #8c603733;
}

.about-story h3 {
  margin: 0 0 .55rem;
  color: #643220;
  font-family: var(--va-display-face);
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: .025em;
  text-shadow: 0 1px #f8e3b7;
}

.about-wax-seal {
  position: relative;
  display: grid;
  place-items: center;
  margin: clamp(2.1rem, 5vw, 3.4rem) auto .35rem;
}

.about-wax-seal::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(15rem, 48%);
  height: 1px;
  background: linear-gradient(90deg, transparent, #81503a88 18%, #81503a88 82%, transparent);
  content: "";
  transform: translate(-50%, -50%);
}

.about-wax-seal img {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(4.75rem, 10vw, 7.5rem);
  height: auto;
  filter: drop-shadow(0 .42rem .38rem #4d211533) drop-shadow(0 0 .9rem #592c6838);
}

.classic-nav,
.classic-quick-rail { background-clip: padding-box; }

.quick-card { margin: .4rem; }

.heritage-proof {
  margin: 2rem 0 .7rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.heritage-image {
  position: relative;
  overflow: hidden;
  clip-path: polygon(1.1% .5%, 16% 0, 37% .35%, 63% 0, 84% .45%, 99% 0, 100% 17%, 99.55% 39%, 100% 64%, 99.25% 84%, 100% 100%, 83% 99.5%, 61% 100%, 39% 99.55%, 17% 100%, 0 99.25%, .55% 81%, 0 59%, .45% 35%, 0 16%);
  background: #0c0908;
  box-shadow: 0 7px 14px #4d2d1d66;
}

.heritage-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  font: inherit;
}

.heritage-image::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid #482015aa;
  background:
    linear-gradient(90deg, #3b170d4d, transparent 2.2%, transparent 97.8%, #3b170d4d),
    linear-gradient(#3b170d44, transparent 4%, transparent 96%, #3b170d44);
  box-shadow: inset 0 0 13px #2d100aaa, inset 0 0 25px #68321d44;
  content: "";
  pointer-events: none;
}

.heritage-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  box-shadow: none;
}

.heritage-zoom-hint {
  position: absolute;
  z-index: 2;
  right: .75rem;
  bottom: .65rem;
  padding: .32rem .55rem;
  border: 1px solid #d6a75c;
  background: #1c0d0ce8;
  color: #ffe3a3;
  font-family: system-ui, sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(.35rem);
  transition: opacity .18s ease, transform .18s ease;
}

.heritage-image:focus-within {
  outline: 2px solid #d6a75c;
  outline-offset: 4px;
}

@media (hover: hover) {
  .heritage-image {
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .heritage-image:hover,
  .heritage-image:focus-within {
    box-shadow: 0 12px 22px #4d2d1d88;
    transform: translateY(-.25rem) scale(1.012);
  }

  .heritage-image:hover .heritage-zoom-hint,
  .heritage-image:focus-within .heritage-zoom-hint {
    opacity: 1;
    transform: translateY(0);
  }
}

.heritage-dialog {
  width: min(96vw, 100rem);
  max-width: none;
  margin: auto;
  padding: .7rem;
  border: 1px solid #b88044;
  outline: 1px solid #2b160e;
  outline-offset: -5px;
  background: #120d11;
  box-shadow: 0 20px 55px #000e, inset 0 0 0 2px #523022;
}

.heritage-dialog::backdrop {
  background: #070408de;
  backdrop-filter: blur(3px);
}

.heritage-dialog-content { position: relative; }

.heritage-dialog img {
  display: block;
  width: 100%;
  max-height: calc(100svh - 4rem);
  object-fit: contain;
}

.heritage-dialog-close {
  position: absolute;
  z-index: 1;
  top: .45rem;
  right: .45rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #d6a75c;
  background: #1b0c0ce8;
  color: #ffe3a3;
  cursor: pointer;
  font: 1.5rem/1 Georgia, serif;
}

.heritage-dialog-close:hover,
.heritage-dialog-close:focus-visible { background: #63281b; }

.heritage-proof figcaption {
  margin: .7rem 0 0;
  padding: 0 .15rem;
  color: #51311f;
  font-size: clamp(.78rem, 1.55vw, .9rem);
  line-height: 1.5;
  text-align: left;
  text-shadow: 0 1px #ffe8bb;
}

.heritage-label {
  display: inline;
  margin-right: .35rem;
  color: #7b451f;
  font-family: system-ui, sans-serif;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

@media (max-width: 48rem) {
  .about-masthead { padding-inline: 1rem; }
  .about-story { padding-inline: 2rem; }
  .about-story .about-lead { text-align: left; }
  .heritage-proof { margin-inline: -.25rem; }
}

/* Roster preview: real rows first, with no simulated online indicators. */
.roster-content {
  color: #4b3420;
  text-shadow: none;
}

.roster-introduction {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #8c603755;
}

.roster-introduction h2 {
  margin: 0;
  color: #572414;
  font-family: var(--va-display-face);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.05;
  text-shadow: 0 1px #f8e3b7;
}

.roster-introduction > div > p:last-child {
  max-width: 39rem;
  margin: .7rem 0 0;
  line-height: 1.6;
}

.roster-count {
  flex: 0 0 auto;
  padding: .48rem .7rem;
  border: 1px solid #7d5734;
  background: linear-gradient(180deg, #f5e1b0, #d3ae70);
  color: #5d2d1b;
  font-family: system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px #fff2cf, 0 2px 4px #6d482945;
}

.roster-preview-notice {
  margin: 1.15rem 0 0;
  padding: .85rem 1rem .85rem 2.8rem;
  border: 1px solid #9a6437;
  background:
    linear-gradient(90deg, #8a452a16, transparent 40%),
    #f0d59c;
  color: #61301e;
  font-size: .9rem;
  line-height: 1.55;
  box-shadow: inset 3px 0 #874225, inset 0 1px #fff0c7;
  position: relative;
}

.roster-preview-notice::before {
  position: absolute;
  top: 50%;
  left: .9rem;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid #5c291a;
  border-radius: 50%;
  background: #8a452a;
  color: #ffe3a1;
  content: "!";
  font-family: Georgia, serif;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.roster-preview-notice strong { color: #4d2016; }

.roster-unavailable {
  margin: 1.15rem 0 0;
  padding: .78rem 1rem;
  border: 1px solid #9a6437;
  background: #f0d59c;
  color: #61301e;
  font-size: .9rem;
  line-height: 1.55;
  box-shadow: inset 3px 0 #874225, inset 0 1px #fff0c7;
}

.roster-unavailable {
  border-color: #7a3e2b;
  background: #ecd0aa;
  color: #57281b;
}

.roster-source {
  margin: .65rem 0 0;
  color: #765033;
  font-family: system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .02em;
  text-align: right;
}

.roster-table {
  margin-top: 1.45rem;
  border: 2px solid #795033;
  outline: 1px solid #3e2518;
  outline-offset: -6px;
  background: #301d18;
  box-shadow: inset 0 0 0 2px #bb8a4e, 0 5px 10px #68442755;
  overflow: hidden;
}

.roster-table-head,
.roster-row {
  display: grid;
  grid-template-columns: minmax(11.5rem, 1.7fr) minmax(3.2rem, .4fr) minmax(5.6rem, .75fr) minmax(6.3rem, .85fr) minmax(3.6rem, .4fr);
  align-items: center;
}

.roster-table-head {
  min-height: 2.35rem;
  padding: .3rem .95rem;
  background: linear-gradient(180deg, #593726, #2b1916);
  color: #f0d390;
  font-family: system-ui, sans-serif;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px #160b08;
}

.roster-row {
  min-height: 3.35rem;
  padding: .35rem .8rem;
  border-top: 1px solid #b4864d66;
  background: linear-gradient(90deg, #ead3a0, #dfc18a 62%, #d1ac70);
}

.roster-row:nth-child(odd) {
  background: linear-gradient(90deg, #e1c38b, #d5b274 62%, #c99e62);
}

.roster-row:hover {
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #f5dfa9, #ebcc91 62%, #d9ad70);
  box-shadow: inset 3px 0 #8a452a, inset -3px 0 #8a452a;
}

.roster-character {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.roster-character strong {
  color: #402116;
  font-family: var(--va-display-face);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .025em;
}

.class-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 1.68rem;
  height: 1.68rem;
  border: 1px solid #2c1a14;
  outline: 1px solid #c99854;
  outline-offset: -4px;
  border-radius: 50%;
  color: #fff0bd;
  font-family: var(--va-display-face);
  font-size: .72rem;
  font-weight: 800;
  text-shadow: 0 1px #000;
  box-shadow: inset 0 0 0 2px #0007, 0 2px 3px #57341f66;
}

.roster-cell {
  color: #4d2c1b;
  font-family: system-ui, sans-serif;
  font-size: .82rem;
}

.roster-cell b { display: none; }
.class-name { font-weight: 800; }
.roster-rank { color: #72411f; font-weight: 800; }

.paladin { color: #e470a3; }
.class-mark.paladin { background: linear-gradient(145deg, #d56695, #6d264b); color: #fff0bd; }
.druid { color: #d17a42; }
.class-mark.druid { background: linear-gradient(145deg, #bc6732, #61311e); color: #fff0bd; }
.priest { color: #625a56; }
.class-mark.priest { background: linear-gradient(145deg, #e8e1d9, #847b75); color: #34201a; text-shadow: 0 1px #fff8; }
.hunter { color: #5d7f4b; }
.class-mark.hunter { background: linear-gradient(145deg, #87aa6a, #3d5933); color: #fff0bd; }
.mage { color: #3183ac; }
.class-mark.mage { background: linear-gradient(145deg, #64b5d8, #245575); color: #fff0bd; }
.rogue { color: #9b7a26; }
.class-mark.rogue { background: linear-gradient(145deg, #d3af42, #785d1d); color: #fff0bd; }
.warrior { color: #8b6544; }
.class-mark.warrior { background: linear-gradient(145deg, #ab8058, #543b2b); color: #fff0bd; }
.warlock { color: #7457a2; }
.class-mark.warlock { background: linear-gradient(145deg, #9a75c9, #443260); color: #fff0bd; }
.death-knight { color: #a83835; }
.class-mark.death-knight { background: linear-gradient(145deg, #c94d49, #5d2428); color: #fff0bd; }
.shaman { color: #3d68b6; }
.class-mark.shaman { background: linear-gradient(145deg, #578bd3, #243d78); color: #fff0bd; }
.monk { color: #3f9870; }
.class-mark.monk { background: linear-gradient(145deg, #59ba8f, #20563f); color: #fff0bd; }
.demon-hunter { color: #7d3d9e; }
.class-mark.demon-hunter { background: linear-gradient(145deg, #aa5dce, #412052); color: #fff0bd; }
.evoker { color: #278c88; }
.class-mark.evoker { background: linear-gradient(145deg, #41bcb4, #1b5656); color: #fff0bd; }
.unknown { color: #725a45; }
.class-mark.unknown { background: linear-gradient(145deg, #92755b, #493b30); color: #fff0bd; }

@media (max-width: 48rem) {
  .roster-introduction { display: block; }
  .roster-count { display: inline-block; margin-top: .9rem; }
  .roster-table-head { display: none; }
  .roster-row {
    grid-template-columns: 1fr 1fr;
    gap: .55rem .9rem;
    padding: .85rem;
  }
  .roster-character { grid-column: 1 / -1; }
  .roster-cell b { display: block; margin-bottom: .1rem; color: #7e5735; font-family: system-ui, sans-serif; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
  .roster-source { text-align: left; }
}

/* Armory roster: dark, dense and deliberately separate from the parchment pages. */
.roster-main {
  border-color: #263849;
  background: #060912;
  box-shadow: 0 18px 36px #000d, inset 0 0 0 1px #ffffff12;
}

.armory-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  min-height: 10.5rem;
  padding: 1.4rem clamp(1.1rem, 4vw, 2.5rem);
  border-bottom: 1px solid #8f773f;
  background:
    linear-gradient(90deg, #05070ee8 0%, #08101de0 45%, #07101cd6 100%),
    url("/static/images/dalaran-trailer-still.png") center 42% / cover;
}

.armory-crest {
  width: clamp(5.25rem, 11vw, 7.25rem);
  padding: .25rem;
  border: 2px solid #b88e34;
  border-radius: 50%;
  background: #080a0e;
  box-shadow: 0 5px 12px #000d, inset 0 0 0 2px #000;
}

.armory-crest img { display: block; width: 100%; height: auto; border-radius: 50%; }

.armory-identity {
  min-width: 0;
  padding-right: 1.25rem;
  border-right: 1px solid #d4b76655;
}

.armory-identity h1 {
  margin: 0;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: clamp(1.9rem, 5vw, 3.15rem);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1;
  text-shadow: 0 2px 5px #000;
}

.armory-identity p {
  margin: .55rem 0 0;
  color: #f1bd2f;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.armory-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 1.15rem;
  margin: 0;
}

.armory-stats div { min-width: max-content; }
.armory-stats dt { color: #bdab91; font-family: system-ui, sans-serif; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.armory-stats dd { margin: .25rem 0 0; color: #f6bf2e; font-family: system-ui, sans-serif; font-size: 1rem; font-weight: 750; }

.armory-roster {
  min-height: 29rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background:
    linear-gradient(180deg, #070a12f5, #080912 76%, #05070d),
    radial-gradient(ellipse at 50% 0, #27365044, transparent 50%);
  color: #e9e2d7;
}

.armory-roster-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid #777b884d;
}

.armory-eyebrow { margin: 0 0 .25rem; color: #f1bb2e; font-family: system-ui, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.armory-roster h2 { margin: 0; color: #fff; font-family: system-ui, sans-serif; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 750; letter-spacing: -.025em; }
.armory-roster .roster-source { margin: 0; color: #9e9ba2; font-size: .7rem; text-align: right; }

.armory-filters {
  display: flex;
  align-items: end;
  gap: 1rem;
  padding: 1.35rem 0;
}

.armory-filters label { display: grid; gap: .38rem; min-width: min(100%, 12rem); }
.armory-filters label > span { color: #bcae98; font-family: system-ui, sans-serif; font-size: .7rem; font-weight: 700; }
.armory-filters select {
  min-height: 2.55rem;
  padding: 0 2.3rem 0 .75rem;
  border: 1px solid #bd962b;
  border-radius: 0;
  background: #05070d;
  color: #f3f0e9;
  font: 700 .88rem system-ui, sans-serif;
}
.armory-filters select:focus-visible { outline: 2px solid #ffe279; outline-offset: 2px; }
.armory-reset {
  min-height: 2.55rem;
  align-self: end;
  padding: 0 .85rem;
  border: 1px solid #9a782d;
  background: #16130f;
  color: #efd686;
  cursor: pointer;
  font: 700 .76rem system-ui, sans-serif;
  letter-spacing: .03em;
}
.armory-reset:hover:not(:disabled) { border-color: #e1b03a; background: #282014; color: #fff1ae; }
.armory-reset:focus-visible { outline: 2px solid #ffe279; outline-offset: 2px; }
.armory-reset:disabled { border-color: #565047; color: #77736e; cursor: default; opacity: .7; }
.armory-filter-count { margin: 0 0 .55rem auto; color: #f0ba2c; font-family: system-ui, sans-serif; font-size: .82rem; font-weight: 700; }
.roster-upcoming-total { margin: 0 0 .55rem -.45rem; color: #c8b89c; font-family: system-ui, sans-serif; font-size: .72rem; font-weight: 650; }

.armory-table-wrap { overflow-x: auto; }
.armory-roster .roster-table {
  min-width: 42rem;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.armory-roster .roster-table-head,
.armory-roster .roster-row {
  grid-template-columns: minmax(14rem, 1.65fr) minmax(5rem, .48fr) minmax(4.75rem, .45fr) minmax(8rem, .8fr);
}

.armory-roster .roster-table-head {
  min-height: 2.6rem;
  padding: 0 1rem;
  background: transparent;
  color: #f2bc2b;
  font-size: .7rem;
  letter-spacing: .035em;
  text-shadow: none;
}

.armory-sort {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: max-content;
  min-height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  letter-spacing: inherit;
  text-align: left;
}
.armory-sort:hover { color: #ffe27c; }
.armory-sort:focus-visible { outline: 2px solid #ffe27c; outline-offset: 3px; }
.armory-sort[aria-pressed="true"] { color: #fff0a7; }
.armory-sort [data-sort-glyph] { display: inline-block; color: #bf9a3d; font-size: .72rem; }

.armory-roster .roster-row {
  min-height: 4.7rem;
  margin-top: 1px;
  padding: .45rem 1rem;
  border: 1px solid #2b2d3a;
  border-left-color: #151722;
  border-right-color: #151722;
  background: #11121cde;
}

.armory-roster .roster-row:nth-child(odd) { background: #181923dd; }
.armory-roster .roster-row:hover { background: #20212c; box-shadow: inset 3px 0 #e6ad28; }
.armory-roster .roster-row[hidden] { display: none; }

.armory-roster .roster-character { gap: .75rem; }
.armory-roster .roster-character strong { color: #f0bd34; font-family: system-ui, sans-serif; font-size: 1.02rem; font-weight: 700; text-shadow: none; }
.character-avatar,
.class-icon,
.class-icon-fallback {
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid #b99232;
  border-radius: 50%;
  box-shadow: 0 2px 5px #000c, inset 0 0 0 2px #0009;
}
.character-avatar { display: grid; place-items: center; overflow: hidden; background: #121824; }
.character-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.character-avatar-fallback { display: block; width: 100%; height: 100%; background: radial-gradient(circle at 48% 35%, #777d8b 0 16%, #273142 17% 38%, #101724 39%); }
.character-avatar--forever { background: #100f13; }
.character-avatar--forever img { object-fit: contain; padding: .16rem; }
.armory-roster .roster-class { display: flex; align-items: center; }
.class-icon { display: block; object-fit: cover; background: #0a0c13; }
.class-icon-fallback { display: block; background: radial-gradient(circle at 50% 45%, #d1b365 0 15%, #58421c 16% 39%, #101015 40%); }
.armory-roster .roster-cell { color: #c7b59d; font-size: .9rem; }
.armory-roster .roster-level { color: #d4c7b1; }
.armory-roster .roster-rank { color: #cbbda5; font-weight: 600; }
.armory-roster .roster-unavailable { margin: 1.4rem 0 0; border-color: #7c522a; background: #1b1517; color: #e4c28e; box-shadow: inset 3px 0 #a1692c; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 52rem) {
  .armory-profile { grid-template-columns: auto minmax(0, 1fr); }
  .armory-stats { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); padding-top: .8rem; border-top: 1px solid #d4b76633; }
}

@media (max-width: 48rem) {
  .armory-profile { gap: .9rem; padding: 1rem; }
  .armory-crest { width: 4.5rem; }
  .armory-identity { padding-right: 0; border-right: 0; }
  .armory-identity h1 { font-size: 1.85rem; }
  .armory-stats { gap: .65rem; }
  .armory-stats dd { font-size: .86rem; }
  .armory-roster { padding: 1rem; }
  .armory-roster-heading { align-items: start; flex-direction: column; }
  .armory-roster .roster-source { text-align: left; }
  .armory-filters { align-items: stretch; flex-wrap: wrap; gap: .75rem; }
  .armory-filters label { flex: 1 1 9rem; }
  .armory-reset { flex: 1 1 12rem; }
  .armory-filter-count { width: 100%; margin: 0; }
  .roster-upcoming-total { width: 100%; margin: -.5rem 0 0; }
  .armory-roster .roster-table-head { display: grid; }
  .armory-roster .roster-table { min-width: 33rem; }
  .armory-roster .roster-row { grid-template-columns: minmax(12rem, 1.65fr) minmax(4.5rem, .48fr) minmax(4rem, .45fr) minmax(6.5rem, .8fr); gap: 0; padding: .45rem .7rem; }
  .armory-roster .roster-character { grid-column: auto; }
  .armory-roster .roster-cell b { display: none; }
}

/* The side rails are dark summoned surfaces rather than parchment objects.
   The magic sits lightly above their surfaces: visible, but never competing
   with the navigation itself. */
.classic-nav,
.classic-quick-rail {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #806482;
  outline: 1px solid #130c18;
  outline-offset: 3px;
  background:
    radial-gradient(ellipse at 50% 0, #784b8538 0, transparent 48%),
    linear-gradient(145deg, #2b2531ed, #100f16f2 58%, #261c2bed);
  box-shadow:
    inset 0 0 0 2px #0a090ed9,
    inset 0 0 0 4px #5a4157b8,
    inset 0 0 1.8rem #6d3e7a3b,
    0 13px 28px #000b,
    0 0 1.4rem #6a3e7a22;
}

/* Preserve the useful fixed navigation behaviour after adding the shared
   positioning needed for the particle layers above. */
.classic-nav { position: sticky; }

.classic-nav > *,
.classic-quick-rail > * {
  position: relative;
  z-index: 1;
}

.classic-nav::before,
.classic-quick-rail::before {
  position: absolute;
  z-index: 2;
  inset: .55rem;
  background:
    radial-gradient(circle at 13% 12%, #f2c8ff 0 1.35px, #c977ee99 1.6px, transparent 3px),
    radial-gradient(circle at 81% 8%, #d89cff 0 1.1px, #9b5fc8aa 1.4px, transparent 2.7px),
    radial-gradient(circle at 20% 31%, #f0bfff 0 1px, transparent 2.5px),
    radial-gradient(circle at 88% 48%, #c88aff 0 1.45px, #743daa99 1.8px, transparent 3.2px),
    radial-gradient(circle at 12% 65%, #e8b6ff 0 1.15px, transparent 2.7px),
    radial-gradient(circle at 76% 74%, #a864df 0 1.5px, #7540aa88 1.9px, transparent 3.3px),
    radial-gradient(circle at 31% 91%, #efc9ff 0 1px, transparent 2.6px),
    radial-gradient(circle at 89% 94%, #bc7ce6 0 1.2px, transparent 2.9px);
  content: "";
  filter: drop-shadow(0 0 4px #bd70e7e6);
  mix-blend-mode: screen;
  opacity: .82;
  pointer-events: none;
  animation: va-arcane-drift 8s ease-in-out infinite alternate;
}

.classic-nav::after,
.classic-quick-rail::after {
  position: absolute;
  z-index: 3;
  inset: .25rem;
  border: 1px solid #c896df66;
  box-shadow: inset 0 0 1.9rem #8e4bac55, inset 0 0 .3rem #e9b9ff66;
  content: "";
  pointer-events: none;
}

.official-game-mark img {
  filter: drop-shadow(0 4px 5px #000c) drop-shadow(0 0 .8rem #9951ba8f);
}

.quick-card {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #0b0a0f, inset 0 0 1.4rem #8e4ea34d, 0 3px 7px #0008;
}

.quick-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 12% 17%, #edc4ffcc 0 1.15px, transparent 2.8px),
    radial-gradient(circle at 86% 27%, #b36ce0bb 0 1.3px, transparent 3px),
    radial-gradient(circle at 75% 78%, #dfabffbb 0 1.15px, transparent 2.7px),
    radial-gradient(circle at 28% 87%, #9d5fceaa 0 1.25px, transparent 2.9px);
  content: "";
  filter: drop-shadow(0 0 3px #b56ce0cc);
  opacity: .9;
  pointer-events: none;
}

.quick-card > * { position: relative; z-index: 2; }

.section-menu a::after {
  position: absolute;
  top: 50%;
  right: .72rem;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  background: #e8b2ff;
  box-shadow: 0 0 .2rem #f1c6ff, 0 0 .78rem #9a4fc1;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(.45);
  transition: opacity .18s ease, transform .18s ease;
}

.section-menu a:hover::after,
.section-menu a.is-current::after {
  opacity: .92;
  transform: translateY(-50%) scale(1);
  animation: va-arcane-pulse 2.6s ease-in-out infinite;
}

.section-menu a:hover,
.section-menu a.is-current {
  box-shadow:
    inset 0 1px #ffe0a594,
    inset 0 -1px #210e12,
    0 4px 9px #000a,
    0 0 1.05rem #b163ca9c;
}

@keyframes va-arcane-drift {
  from { opacity: .5; transform: translateY(-.24rem); }
  to { opacity: .9; transform: translateY(.3rem); }
}

@keyframes va-arcane-pulse {
  0%, 100% { box-shadow: 0 0 .18rem #f1c6ff, 0 0 .6rem #9a4fc1; }
  50% { box-shadow: 0 0 .32rem #fff0ff, 0 0 1rem #b662dc; }
}

@media (prefers-reduced-motion: reduce) {
  .classic-nav::before,
  .classic-quick-rail::before,
  .section-menu a:hover::after,
  .section-menu a.is-current::after { animation: none; }
}

/* The left rail is a single painted interface panel.  Its labels stay as HTML
   over the empty plates, keeping the existing navigation accessible and able
   to react to the current page. */
.classic-nav.arcane-nav-panel {
  display: grid;
  grid-template-rows: 31% 11% 50% 8%;
  width: 100%;
  aspect-ratio: 724 / 2172;
  box-sizing: border-box;
  min-height: 0;
  padding: 0 12.5%;
  overflow: visible;
  border: 0;
  outline: 0;
  background: url("/static/images/arcane-navigation-panel-v1.png") center top / 100% 100% no-repeat;
  box-shadow: none;
  backdrop-filter: none;
}

.classic-nav.arcane-nav-panel::before,
.classic-nav.arcane-nav-panel::after { display: none; }

.classic-nav.arcane-nav-panel > * { z-index: auto; }

.arcane-nav-panel .official-game-mark {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 7% 0 0;
  border: 0;
}

.arcane-nav-panel .official-game-mark img {
  width: min(76%, 10.5rem);
  filter: drop-shadow(0 .35rem .45rem #020106dd) drop-shadow(0 0 .8rem #8e46b977);
}

.arcane-nav-panel .landing-rail-copy {
  display: grid;
  align-content: center;
  margin: 0;
  padding: 0 .3rem;
  border: 0;
  background: transparent;
  color: #e1d4e2;
  font-size: clamp(.72rem, 1.06vw, .9rem);
  line-height: 1.4;
  text-shadow: 0 2px .25rem #050207;
}

.arcane-nav-panel .landing-rail-copy .rail-kicker {
  margin-bottom: .28rem;
  color: #f1ce81;
  font-size: .78em;
}

.arcane-nav-panel .section-menu {
  display: grid;
  grid-template-rows: 31% 47% 22%;
  min-height: 0;
}

.arcane-nav-panel .section-menu section {
  display: grid;
  min-height: 0;
  margin: 0;
}

.arcane-nav-panel .section-menu section:nth-child(1) { grid-template-rows: 18% repeat(3, minmax(0, 1fr)); }
.arcane-nav-panel .section-menu section:nth-child(2) { grid-template-rows: 13% repeat(4, minmax(0, 1fr)); }
.arcane-nav-panel .section-menu section:nth-child(3) { grid-template-rows: 38% minmax(0, 1fr); }

.arcane-nav-panel .section-menu h2 {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0 .5rem 0 1.65rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #e8c779;
  font-size: clamp(.58rem, .95vw, .78rem);
  letter-spacing: .13em;
  text-shadow: 0 1px #170d15, 0 0 .45rem #b562d477;
}

.arcane-nav-panel .section-menu h2::before {
  left: .48rem;
  width: .44rem;
  height: .44rem;
  border-color: #d7b166;
  background: #321c3d;
  box-shadow: 0 0 .35rem #a95bd077, inset 0 0 0 1px #09050d;
}

.arcane-nav-panel .section-menu a,
.arcane-nav-panel .section-menu .menu-placeholder {
  display: block;
  min-width: 0;
  margin: 0;
  padding: .22rem 1.15rem .18rem 1.62rem;
  border: 0;
  outline: 0;
  border-radius: .5rem;
  background: transparent;
  box-shadow: none;
  color: #ddd4dd;
  font-size: clamp(.68rem, 1.02vw, .94rem);
  line-height: 1.18;
  text-shadow: 0 2px .22rem #030207;
  transform: none;
}

.arcane-nav-panel .section-menu a::before,
.arcane-nav-panel .section-menu .menu-placeholder::before {
  top: 50%;
  left: .54rem;
  width: .34rem;
  height: .34rem;
  border-color: #c7a7cd;
  background: #51315c;
  box-shadow: 0 0 .3rem #a25bbd88;
  transform: translateY(-50%) rotate(45deg);
}

.arcane-nav-panel .section-menu a small,
.arcane-nav-panel .section-menu .menu-placeholder small {
  display: block;
  margin: .08rem 0 0;
  color: #c9b8ca;
  font-size: .66em;
  line-height: 1.1;
}

.arcane-nav-panel .section-menu .menu-placeholder {
  opacity: .67;
  color: #bbb0bc;
}

.arcane-nav-panel .section-menu a:hover {
  color: #fff1c8;
  background: radial-gradient(ellipse at center, #a45fc327, transparent 70%);
}

.arcane-nav-panel .section-menu a::after {
  position: absolute;
  inset: .2rem .14rem;
  width: auto;
  height: auto;
  border: 1px solid #cf92ed00;
  border-radius: .52rem;
  background: radial-gradient(ellipse at 50% 50%, #b669d61c, transparent 72%);
  box-shadow: 0 0 .2rem #d788ff00, inset 0 0 .4rem #b966d200;
  content: "";
  opacity: 0;
  transform: none;
  transition: opacity .18s ease, border-color .18s ease;
}

.arcane-nav-panel .section-menu a:hover::after { opacity: .52; }

.arcane-nav-panel .section-menu a.is-current {
  z-index: 1;
  color: #fff3c6;
  background: radial-gradient(ellipse at 50% 50%, #9f55c544, transparent 74%);
  box-shadow: 0 0 .68rem #9e4cc89c;
  animation: va-nav-aura 2.7s ease-in-out infinite;
}

.arcane-nav-panel .section-menu a.is-current::before {
  border-color: #ffe08b;
  background: #c97441;
  box-shadow: 0 0 .45rem #f2beffbb;
}

.arcane-nav-panel .section-menu a.is-current::after {
  border-color: #e5a4ff;
  box-shadow: 0 0 .28rem #f1bbff, 0 0 .9rem #a34bd4b8, inset 0 0 .52rem #bd6ee066;
  opacity: 1;
  animation: va-nav-aura-ring 2.7s ease-in-out infinite;
}

.arcane-nav-panel .nav-footnote {
  align-self: start;
  margin: .38rem .2rem 0;
  color: #d4c7d2;
  font-size: clamp(.61rem, .92vw, .76rem);
  line-height: 1.25;
  text-shadow: 0 2px .25rem #050207;
}

@keyframes va-nav-aura {
  0%, 100% { box-shadow: 0 0 .48rem #8f46bc88, 0 0 1rem #61317b44; }
  50% { box-shadow: 0 0 .9rem #e0a0ffdd, 0 0 1.55rem #9946c5bb; }
}

@keyframes va-nav-aura-ring {
  0%, 100% { opacity: .68; filter: brightness(.9); }
  50% { opacity: 1; filter: brightness(1.32); }
}

@media (max-width: 48rem) {
  .classic-nav.arcane-nav-panel {
    position: static;
    width: min(100%, 28rem);
    margin: 0 auto;
  }

  .arcane-nav-panel .section-menu { grid-template-columns: 1fr; gap: 0; }
}

@media (min-width: 68.01rem) {
  .classic-guild-layout {
    grid-template-columns: minmax(18rem, .95fr) minmax(0, 2.35fr) minmax(12.75rem, .8fr);
  }
}

@media (min-width: 48.01rem) and (max-width: 68rem) {
  .classic-guild-layout {
    grid-template-columns: minmax(17rem, .95fr) minmax(0, 2fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcane-nav-panel .section-menu a.is-current,
  .arcane-nav-panel .section-menu a.is-current::after { animation: none; }
}

/* The illustrated panel has fixed button wells.  Keep the document semantics,
   but register every label directly to its matching well instead of allowing
   text height or a responsive grid to move the controls. */
.classic-nav.arcane-nav-panel {
  display: block;
  padding: 0;
}

.arcane-nav-panel .official-game-mark {
  position: absolute;
  top: 5.5%;
  left: 14%;
  width: 72%;
  height: 23.5%;
  padding: 0;
}

.arcane-nav-panel .official-game-mark img { width: min(76%, 10.5rem); }

.arcane-nav-panel .landing-rail-copy {
  position: absolute;
  top: 30.5%;
  left: 15%;
  width: 70%;
  height: 8.5%;
  padding: 0;
}

.arcane-nav-panel .section-menu {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 0;
}

.arcane-nav-panel .section-menu section { display: contents; }

.arcane-nav-panel .section-menu h2.panel-heading,
.arcane-nav-panel .section-menu .panel-button {
  position: absolute;
  left: 14.5%;
  width: 71%;
  box-sizing: border-box;
}

.arcane-nav-panel .section-menu h2.panel-heading {
  display: flex;
  align-items: center;
  height: 2.1%;
  margin: 0;
  padding: 0 0 0 1.55rem;
  color: #e7c978;
  font-size: clamp(.52rem, .72vw, .72rem);
  line-height: 1;
  letter-spacing: .13em;
}

.arcane-nav-panel .section-menu h2.panel-heading::before {
  left: .46rem;
  width: .4rem;
  height: .4rem;
}

.arcane-nav-panel .section-menu .panel-button {
  display: block;
  height: 4.2%;
  margin: 0;
  padding: .28rem .9rem .18rem 1.55rem;
  overflow: hidden;
  color: #ded6df;
  font-size: clamp(.62rem, .82vw, .82rem);
  line-height: 1.08;
}

.arcane-nav-panel .section-menu .panel-button::before {
  left: .5rem;
  width: .31rem;
  height: .31rem;
}

.arcane-nav-panel .section-menu .panel-button small {
  margin-top: .1rem;
  font-size: .64em;
  line-height: 1.05;
}

.arcane-nav-panel .panel-heading-guild { top: 40.4%; }
.arcane-nav-panel .panel-button-about { top: 43.0%; }
.arcane-nav-panel .panel-button-status { top: 47.6%; }
.arcane-nav-panel .panel-button-dkp { top: 52.2%; }

.arcane-nav-panel .panel-heading-community { top: 57.0%; }
.arcane-nav-panel .panel-button-news { top: 59.7%; }
.arcane-nav-panel .panel-button-streams { top: 64.3%; }
.arcane-nav-panel .panel-button-discord { top: 68.9%; }
.arcane-nav-panel .panel-button-contact { top: 73.5%; }

.arcane-nav-panel .panel-heading-information { top: 78.9%; }
.arcane-nav-panel .panel-button-privacy { top: 82.2%; }

.arcane-nav-panel .nav-footnote {
  position: absolute;
  top: 90.7%;
  left: 15%;
  width: 70%;
  margin: 0;
}

@media (max-width: 48rem) {
  .arcane-nav-panel .section-menu { display: block; }
}

/* First alignment pass: present the illustrated navigation as one blank,
   intrinsically sized object. Interactive SVG paths will be added over these
   exact image coordinates only after its visual scale is approved. */
.classic-nav.arcane-nav-panel {
  position: sticky;
  top: 1.2rem;
  align-self: start;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  aspect-ratio: 724 / 2172;
}

.arcane-nav-panel .arcane-nav-artwork {
  display: block;
  width: 100%;
  height: auto;
}

/* The SVG uses the native 724 x 2172 artwork coordinate system. It therefore
   scales in perfect lockstep with the panel rather than guessing positions
   from responsive text-flow. */
.arcane-nav-panel .arcane-nav-mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}

.arcane-nav-mask svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.arcane-nav-identity { pointer-events: none; }

.arcane-nav-identity {
  text-anchor: middle;
  paint-order: stroke;
}

.arcane-nav-identity-title {
  fill: #efcf7e;
  font-family: var(--va-display-face);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  stroke: #180d16;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.arcane-nav-identity-copy {
  fill: #ede3eb;
  font-family: var(--va-display-face);
  font-size: 23px;
  font-weight: 700;
  stroke: #120a13;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.arcane-nav-category,
.arcane-nav-link { font-family: var(--va-display-face); }

.arcane-nav-category {
  pointer-events: none;
  fill: #f0d07f;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 3.5px;
  text-anchor: middle;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: #170d15;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.arcane-nav-link { cursor: pointer; }

.arcane-nav-hit {
  /* Stay inside the painted bronze controls: the hover is a restrained warm
     glint, not a second violet button painted over the panel artwork. */
  fill: #c89a4d;
  fill-opacity: 0;
  stroke: #f1cb7c;
  stroke-width: 3px;
  stroke-opacity: 0;
  transition: fill-opacity .18s ease, stroke-opacity .18s ease, filter .18s ease;
}

.arcane-nav-link:hover .arcane-nav-hit,
.arcane-nav-link:focus-visible .arcane-nav-hit,
.arcane-nav-link.is-current .arcane-nav-hit {
  fill-opacity: .075;
  stroke-opacity: .74;
  filter: drop-shadow(0 0 4px #f3cf80) drop-shadow(0 0 10px #69401f);
}

.arcane-nav-link.is-current .arcane-nav-hit {
  fill-opacity: .12;
  animation: va-nav-mask-aura 2.8s ease-in-out infinite;
}

.arcane-nav-link.is-unavailable { pointer-events: none; }
.arcane-nav-link.is-unavailable .arcane-nav-hit { fill-opacity: .05; }

.arcane-nav-label {
  pointer-events: none;
  fill: #eee6eb;
  font-size: 29px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #120b14;
  stroke-width: 4px;
  stroke-linejoin: round;
}

.arcane-nav-link:hover .arcane-nav-label,
.arcane-nav-link:focus-visible .arcane-nav-label,
.arcane-nav-link.is-current .arcane-nav-label { fill: #fff0bf; }

.arcane-nav-link.is-unavailable .arcane-nav-label { fill: #ad9fae; }

.arcane-nav-label-detail {
  fill: #d2c4d1;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .45px;
  text-transform: uppercase;
}

@keyframes va-nav-mask-aura {
  50% {
    fill-opacity: .16;
    stroke-opacity: .92;
    filter: drop-shadow(0 0 6px #ffe0a1) drop-shadow(0 0 14px #805126);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcane-nav-link.is-current .arcane-nav-hit { animation: none; }
}

@media (max-width: 48rem) {
  .classic-nav.arcane-nav-panel {
    position: static;
    width: min(100%, 28rem);
    margin: 0 auto;
  }
}

/* The about-page masthead belongs to the same chronicle sheet as its story:
   it is a quiet first section, not a second parchment placed above it. */
.about-masthead {
  margin: 0 0 clamp(1.45rem, 3vw, 2.1rem);
  padding: clamp(.8rem, 2vw, 1.35rem) 1rem clamp(1.45rem, 3vw, 2rem);
  border: 0;
  border-bottom: 1px solid #8c603788;
  background: transparent;
  box-shadow: none;
  color: #4b3420;
}

.about-masthead .realm-ribbon {
  border-color: #91623c;
  color: #6d3925;
  text-shadow: 0 1px #ffe9bc;
}

.about-masthead h1 {
  color: #572414;
  text-shadow: 0 1px #ffe9bc, 0 2px #bd8954, 0 3px #43201455;
}

.about-masthead > p:last-child {
  color: #4f3522;
  text-shadow: 0 1px #ffecc2;
}

/* Wide screens have enough Dalaran backdrop around the portal.  Let the page
   use that room, but cap both side rails so the added width belongs to the
   story and roster columns rather than distorting the illustrated navigation. */
@media (min-width: 82rem) {
  .site-header,
  main,
  footer { width: min(100% - 3.5rem, 96rem); }

  .classic-guild-layout {
    grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr) minmax(12.75rem, 15rem);
    gap: 1.15rem;
  }
}

/* Character profiles keep the Armory's readable equipment silhouette without
   depending on Retail-only item-level information or a rendered 3D model. */
.armory-source-tabs {
  display: flex;
  gap: .5rem;
  padding: .75rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid #a6792d70;
  background: #080a10e8;
}

.armory-source-tabs a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.35rem;
  padding: 0 .85rem;
  border: 1px solid #8e6e2f;
  background: #15120f;
  color: #c9bba1;
  font: 800 .76rem system-ui, sans-serif;
  letter-spacing: .035em;
  text-decoration: none;
}

.armory-source-tabs a:hover { border-color: #e8bd45; color: #fff0b0; }
.armory-source-tabs a:focus-visible { outline: 2px solid #ffe27c; outline-offset: 3px; }
.armory-source-tabs a[aria-current="page"] { border-color: #d9a72f; background: #352814; color: #fff1aa; box-shadow: inset 0 0 0 1px #f5cf5a33; }
.armory-source-tabs span { color: #d9a72f; font-size: .65rem; text-transform: uppercase; }

.roster-profile-static {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: inherit;
}

.forever-roster-empty {
  max-width: 44rem;
  margin: 2rem auto 1rem;
  padding: clamp(1.15rem, 4vw, 2rem);
  border: 1px solid #8b6c2d;
  background: linear-gradient(135deg, #161412f2, #111621f0);
  box-shadow: inset 0 0 0 1px #f2d07e1a;
}

.forever-roster-empty h3 { margin: 0 0 .8rem; color: #fff0bc; font-family: system-ui, sans-serif; font-size: clamp(1.1rem, 3vw, 1.45rem); }
.forever-roster-empty p:not(.armory-eyebrow) { color: #cbc1b2; line-height: 1.65; }
.forever-import-link {
  display: inline-flex;
  min-height: 2.6rem;
  align-items: center;
  padding: 0 .95rem;
  border: 1px solid #d5a62d;
  background: #352714;
  color: #fff0b0;
  font: 750 .82rem system-ui, sans-serif;
  text-decoration: none;
}
.forever-import-link:hover { border-color: #ffe27c; background: #4a3617; }
.forever-import-link:focus-visible { outline: 2px solid #ffe27c; outline-offset: 3px; }

.roster-import { max-width: none; }
.roster-import > p { max-width: 50rem; color: #cbc1b2; line-height: 1.6; }
.forever-import-form { display: grid; gap: .65rem; max-width: 52rem; margin-top: 1.5rem; }
.forever-import-form label { color: #f1bd2f; font: 750 .8rem system-ui, sans-serif; letter-spacing: .04em; }
.forever-import-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #8e6e2f;
  background: #080a10;
  color: #e9e2d7;
  font: .8rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.forever-import-form input[type="number"] {
  width: min(100%, 14rem);
  min-height: 2.55rem;
  padding: 0 .75rem;
  border: 1px solid #8e6e2f;
  background: #080a10;
  color: #e9e2d7;
  font: 700 .95rem system-ui, sans-serif;
}
.forever-import-form textarea:focus-visible { outline: 2px solid #ffe27c; outline-offset: 3px; }
.forever-import-form input[type="number"]:focus-visible { outline: 2px solid #ffe27c; outline-offset: 3px; }
.forever-import-form button {
  justify-self: start;
  min-height: 2.6rem;
  padding: 0 .95rem;
  border: 1px solid #d5a62d;
  background: #352714;
  color: #fff0b0;
  font: 750 .82rem system-ui, sans-serif;
  cursor: pointer;
}
.forever-import-form button:hover { border-color: #ffe27c; background: #4a3617; }
.forever-upcoming-admin { max-width: 52rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #8e6e2f66; }
.forever-upcoming-admin h2 { margin: 0 0 .75rem; color: #fff0bc; font-family: system-ui, sans-serif; font-size: clamp(1.1rem, 3vw, 1.45rem); }
.forever-upcoming-admin > p:not(.armory-eyebrow):not(.form-success) { max-width: 50rem; color: #cbc1b2; line-height: 1.6; }
.form-success { max-width: 50rem; margin: 1rem 0 0; padding: .75rem .9rem; border: 1px solid #819a4a; background: #152016; color: #dcf0ac; font-family: system-ui, sans-serif; font-weight: 650; }

@media (max-width: 48rem) {
  .armory-source-tabs { flex-wrap: wrap; padding: .65rem 1rem; }
  .armory-source-tabs a { flex: 1 1 10rem; justify-content: center; }
}

.roster-profile-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.roster-profile-link:hover strong { color: #ffe27c; text-decoration: underline; }
.roster-profile-link:focus-visible { outline: 2px solid #ffe27c; outline-offset: 4px; }

.character-profile-header {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "back back back"
    "portrait identity facts";
  row-gap: 1rem;
  background:
    linear-gradient(90deg, #05070ed1 0%, #08101dc9 45%, #07101cbf 100%),
    url("/static/images/dalaran-trailer-still.png") center 42% / cover;
}

.character-main { background: #0609123d; }

.character-back {
  grid-area: back;
  width: max-content;
  color: #d5c6ac;
  font: 700 .76rem system-ui, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
}

.character-back:hover { color: #ffe27c; text-decoration: underline; }
.character-back:focus-visible { outline: 2px solid #ffe27c; outline-offset: 3px; }

.character-header-portrait {
  grid-area: portrait;
  width: clamp(4.9rem, 10vw, 6.5rem);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid #b88e34;
  border-radius: 50%;
  background: #080a0e;
  box-shadow: 0 5px 12px #000d, inset 0 0 0 2px #000;
}

.character-header-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.character-identity { grid-area: identity; }
.character-facts { grid-area: facts; }

.armory-character {
  min-height: 34rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background:
    linear-gradient(180deg, #070a127a, #08091270 69%, #05070d7a),
    radial-gradient(ellipse 20rem 27rem at 50% 45%, #060912e3 0%, #060912c0 42%, #06091255 66%, transparent 88%),
    radial-gradient(ellipse at 50% 20%, #27365044, transparent 56%);
  color: #e9e2d7;
}

.character-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #777b884d;
}

.character-section-heading h2,
.character-data-unavailable h2 {
  margin: 0;
  color: #fff;
  font: 750 clamp(1.2rem, 2.6vw, 1.65rem) system-ui, sans-serif;
  letter-spacing: -.025em;
}

.character-section-heading > p {
  margin: 0;
  color: #9e9ba2;
  font-size: .7rem;
  text-align: right;
}

.equipment-tableau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.5rem, .64fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(.9rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 3vw, 2.1rem) 0 1rem;
}

.equipment-list {
  display: grid;
  gap: .48rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.equipment-item {
  display: grid;
  grid-template-columns: 2.85rem minmax(0, 1fr);
  align-items: center;
  gap: .68rem;
  min-height: 3.15rem;
}

.equipment-list-right .equipment-item { grid-template-columns: minmax(0, 1fr) 2.85rem; }
.equipment-list-right .equipment-copy { align-items: end; text-align: right; }

.equipment-icon {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  overflow: hidden;
  border: 1px solid #656b76;
  background: #111521;
  box-shadow: 0 2px 5px #000c, inset 0 0 0 2px #0009;
}

.equipment-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.equipment-copy { display: grid; gap: .08rem; min-width: 0; }
.equipment-copy b { color: #b9ad9a; font: 700 .62rem system-ui, sans-serif; letter-spacing: .055em; text-transform: uppercase; }
.equipment-copy > span { overflow: hidden; color: #e8e4df; font: 650 .8rem/1.22 system-ui, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.equipment-copy small { color: #aaa6a3; font: 600 .63rem system-ui, sans-serif; }

.quality-poor { border-color: #9d9d9d; color: #9d9d9d !important; }
.quality-common { border-color: #d8d8d8; color: #e7e7e7 !important; }
.quality-uncommon { border-color: #1eff00; color: #47d34c !important; }
.quality-rare { border-color: #0070dd; color: #4aa1ef !important; }
.quality-epic { border-color: #a335ee; color: #cb71fa !important; }
.quality-legendary { border-color: #ff8000; color: #f5a24e !important; }
.quality-artifact { border-color: #e6cc80; color: #f1dc91 !important; }
.quality-heirloom { border-color: #00ccff; color: #65d9ff !important; }
.quality-empty { border-color: #414654; color: #787c88 !important; }
.equipment-item.is-empty { opacity: .62; }

.character-centerpiece {
  display: grid;
  grid-template-rows: 22.5rem auto;
  justify-items: center;
  min-height: 0;
  text-align: center;
}

.character-render-stage {
  position: relative;
  display: grid;
  grid-row: 1;
  place-items: end center;
  width: 100%;
  height: 22.5rem;
  overflow: hidden;
}

.character-centerpiece img.character-portrait {
  position: relative;
  z-index: 1;
  width: min(100%, 9.4rem);
  aspect-ratio: 1;
  border: 2px solid #b88e34;
  border-radius: 50%;
  background: #080a0e;
  box-shadow: 0 6px 20px #000d;
  object-fit: cover;
}

.character-centerpiece img.character-render {
  position: relative;
  width: min(100%, 16rem);
  height: 22.5rem;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(1.5rem) scale(3.35);
  transform-origin: center bottom;
  filter: drop-shadow(0 10px 16px #000c);
}

.character-centerpiece > span:last-child {
  grid-row: 2;
  position: relative;
  z-index: 1;
  margin-top: .7rem;
  color: #f0bd34;
  font: 750 .72rem system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.equipment-list-bottom {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 6vw, 4rem);
  padding-top: .7rem;
}

.equipment-list-bottom .equipment-item { min-width: min(100%, 13.5rem); }

.character-base-stats { margin-top: clamp(1.75rem, 5vw, 3rem); }

.character-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1.1rem 0 0;
  background: #303342;
}

.character-stat-grid div {
  min-width: 0;
  padding: .95rem .85rem;
  background: #10121c;
}

.character-stat-grid dt { color: #b9ad9a; font: 700 .62rem system-ui, sans-serif; letter-spacing: .055em; text-transform: uppercase; }
.character-stat-grid dd { margin: .32rem 0 0; color: #f0bd34; font: 750 1rem system-ui, sans-serif; }
.character-data-note,
.character-data-unavailable > p:last-child { color: #c7b59d; font-size: .9rem; line-height: 1.6; }
.character-data-unavailable { max-width: 40rem; padding: 1.2rem 0; }

/* The right rail now uses the same painted arcane frame as the navigation.
   Its four wells are image-backed while their content remains accessible HTML. */
.classic-quick-rail.arcane-status-panel {
  position: sticky;
  top: 1.2rem;
  display: block;
  width: 100%;
  aspect-ratio: 724 / 2172;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  isolation: auto;
  backdrop-filter: none;
}

.classic-quick-rail.arcane-status-panel::before,
.classic-quick-rail.arcane-status-panel::after { display: none; }

.arcane-status-artwork {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arcane-status-panel .status-panel-card {
  position: absolute !important;
  z-index: 1 !important;
  box-sizing: border-box;
  width: 64%;
  margin: 0 !important;
  padding: clamp(.5rem, 1.3vw, .9rem) clamp(.45rem, 1.1vw, .75rem);
  overflow: hidden;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #dfd5d6;
  text-align: center;
}

.arcane-status-panel .status-panel-card::after { display: none; }

.arcane-status-panel .status-panel-card--overview {
  top: 11.6%;
  left: 14%;
  width: 72%;
  height: 14.4%;
}

.arcane-status-panel .status-panel-card--second {
  top: 28.8%;
  left: 13%;
  width: 74%;
  height: 15.2%;
}

.arcane-status-panel .status-panel-card--third {
  top: 46.8%;
  left: 13%;
  width: 74%;
  height: 16%;
}

.arcane-status-panel .status-panel-card--fourth {
  top: 66%;
  left: 13%;
  width: 74%;
  height: 16.7%;
}

.arcane-status-panel .quick-card h2 {
  margin: 0 0 .35rem;
  padding-bottom: .32rem;
  border-bottom-color: #d0a45d99;
  color: #f1cf83;
  font-size: clamp(.75rem, 1.15vw, .98rem);
  letter-spacing: .065em;
  text-shadow: 0 1px #160d17, 0 0 .4rem #ae5bcd88;
}

.arcane-status-panel .quick-card dl div {
  gap: .35rem;
  padding: .18rem 0;
  border-bottom-color: #c99c6230;
}

.arcane-status-panel .quick-card dt,
.arcane-status-panel .quick-card dd {
  font-size: clamp(.56rem, .75vw, .69rem);
  line-height: 1.15;
  text-shadow: 0 1px #120a14;
}

.arcane-status-panel .quick-card dt { color: #c9b7c3; }
.arcane-status-panel .quick-card dd { color: #eed089; }

.arcane-status-panel .status-panel-link,
.arcane-status-panel .status-panel-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  color: #dfd5d6;
  text-decoration: none;
}

.arcane-status-panel .status-panel-link {
  padding: 0;
  border: 0;
  border-radius: .25rem;
  background: transparent;
  box-shadow: none;
  text-transform: none;
  transition: color .16s ease, text-shadow .16s ease;
}

.arcane-status-panel .status-panel-link:hover,
.arcane-status-panel .status-panel-link:focus-visible {
  background: transparent;
  color: #fff0bb;
  outline: 0;
  text-shadow: 0 0 .55rem #d66affbb;
}

.arcane-status-panel .status-panel-label {
  color: #e6c679;
  font: 800 clamp(.68rem, .92vw, .84rem)/1.15 system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.arcane-status-panel .status-panel-link strong,
.arcane-status-panel .status-panel-copy strong {
  margin-top: .26rem;
  color: #f1d7de;
  font: 800 clamp(.68rem, .9vw, .84rem)/1.2 system-ui, sans-serif;
}

.arcane-status-panel .status-panel-link small,
.arcane-status-panel .status-panel-copy small {
  margin-top: .18rem;
  color: #c8b6bd;
  font: 600 clamp(.62rem, .8vw, .74rem)/1.25 system-ui, sans-serif;
}

.arcane-status-panel .status-panel-card--second .status-panel-label {
  font-size: clamp(.95rem, 1.25vw, 1.14rem);
}

.arcane-status-panel .status-panel-card--second .status-panel-link small {
  font-size: clamp(.74rem, .95vw, .9rem);
}

.arcane-status-panel .status-panel-services {
  display: grid;
  gap: .12rem;
  margin-top: .48rem;
  color: #d8c8cf;
  font: 650 clamp(.54rem, .7vw, .66rem)/1.25 system-ui, sans-serif;
}

.arcane-status-panel .status-panel-card--fourth .status-panel-link {
  justify-content: flex-start;
  padding-top: clamp(1.1rem, 1.6vw, 1.45rem);
}

.arcane-status-panel .status-panel-twitch-links {
  display: grid;
  gap: .2rem;
  margin-top: .36rem;
}

.arcane-status-panel .status-panel-twitch-link {
  display: grid;
  gap: .08rem;
  color: #ee94ff;
  font: 750 clamp(.58rem, .74vw, .7rem)/1.15 system-ui, sans-serif;
  text-decoration: none;
}

.arcane-status-panel .status-panel-twitch-link:hover,
.arcane-status-panel .status-panel-twitch-link:focus-visible {
  color: #ffd1ff;
  outline: 0;
  text-decoration: underline;
}

.arcane-status-panel .status-panel-twitch-link small {
  color: #c8b6bd;
  font-size: .9em;
  font-weight: 600;
}

@media (min-width: 68.01rem) {
  .classic-guild-layout {
    grid-template-columns: minmax(17rem, 1fr) minmax(0, 2.35fr) minmax(17rem, 1fr);
  }
}

@media (min-width: 82rem) {
  .classic-guild-layout {
    grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr) minmax(18rem, 20rem);
  }
}

@media (max-width: 68rem) {
  .classic-quick-rail.arcane-status-panel {
    grid-column: 1 / -1;
    width: min(100%, 28rem);
    margin-inline: auto;
  }
}

@media (max-width: 64rem) {
  .character-profile-header { grid-template-areas: "back back" "portrait identity" "facts facts"; grid-template-columns: auto minmax(0, 1fr); }
  .character-facts { grid-template-columns: repeat(3, 1fr); padding-top: .8rem; border-top: 1px solid #d4b76633; }
  .equipment-tableau { grid-template-columns: minmax(0, 1fr) minmax(7rem, .55fr) minmax(0, 1fr); gap: 1rem; }
  .equipment-copy > span { font-size: .74rem; }
}

@media (max-width: 48rem) {
  .character-profile-header { gap: .9rem; padding: 1rem; }
  .character-header-portrait { width: 4.5rem; }
  .character-facts { gap: .65rem; }
  .character-facts dd { font-size: .86rem; }
  .armory-character { padding: 1rem; }
  .character-section-heading { align-items: start; flex-direction: column; }
  .character-section-heading > p { text-align: left; }
  .equipment-tableau { grid-template-columns: 1fr; gap: 1.25rem; }
  .character-centerpiece { order: -1; grid-template-rows: 18rem auto; min-height: 0; }
  .character-render-stage { height: 18rem; }
  .character-centerpiece img.character-render { width: min(100%, 13rem); height: 18rem; transform: translateY(.95rem) scale(2.75); }
  .equipment-list { gap: .62rem; }
  .equipment-list-bottom { align-items: stretch; flex-direction: column; gap: .62rem; }
  .equipment-list-bottom .equipment-item { width: 100%; min-width: 0; }
  .character-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Home: one strong world motif replaces the repeated central crest. */
.guild-masthead--stormwind {
  isolation: isolate;
  min-height: clamp(20rem, 35vw, 28rem);
  padding: clamp(1.25rem, 3vw, 2.2rem) clamp(1rem, 4vw, 3rem);
  justify-content: flex-end;
  gap: .85rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, #110b160d 0%, #120b1880 54%, #0b0811ec 100%),
    linear-gradient(90deg, #170c1e66 0%, transparent 36%, transparent 64%, #170c1e66 100%),
    url("/static/images/stormwind-gate-sunset-v1.jpg") center 53% / cover no-repeat;
}

.guild-masthead--stormwind::before,
.guild-masthead--stormwind::after {
  z-index: 2;
  background: #2c1b35;
}

.guild-masthead--stormwind .realm-ribbon,
.guild-masthead--stormwind .guild-masthead-copy {
  position: relative;
  z-index: 1;
}

.guild-masthead--stormwind .realm-ribbon {
  margin: 0;
  border-color: #d0a55e88;
  color: #f1d19a;
  background: #10091478;
  text-shadow: 0 1px .2rem #0b0610;
}

.guild-masthead--stormwind .guild-masthead-copy { padding: 0; }

.guild-masthead--stormwind h1 {
  color: #f4d481;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  text-shadow: 0 2px #422114, 0 4px #0b0811, 0 8px 1.2rem #000d;
}

.guild-masthead--stormwind .guild-masthead-home {
  margin-top: .55rem;
  color: #f0d9ba;
  font-size: clamp(.7rem, 1.15vw, .9rem);
  letter-spacing: .15em;
  text-shadow: 0 1px .25rem #0c0711;
}

.guild-masthead--stormwind .guild-masthead-homage {
  max-width: 38rem;
  margin: .9rem auto 0;
  color: #f1d6c4;
  font: italic 600 clamp(.88rem, 1.5vw, 1.08rem)/1.45 Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
  text-transform: none;
  text-shadow: 0 1px .28rem #08050b;
}

/* The painted desktop rail and its fixed SVG coordinates do not shrink into a
   usable phone menu. On smaller screens, retain the same navigation as a
   deliberately separate, accessible list. */
.mobile-guild-nav { display: none; }

@media (max-width: 48rem) {
  .classic-nav.arcane-nav-panel {
    width: min(100%, 34rem);
    aspect-ratio: auto;
    margin: 0 auto;
    padding: .85rem;
    overflow: hidden;
    border: 1px solid #9c7549;
    background:
      radial-gradient(ellipse at 50% 0, #713d8650, transparent 52%),
      linear-gradient(145deg, #211726f5, #0d0b11fa 62%, #231628f5);
    box-shadow: inset 0 0 0 1px #0a070d, inset 0 0 0 3px #6c4a5c, 0 .85rem 1.8rem #000b;
  }

  .arcane-nav-panel .arcane-nav-artwork,
  .arcane-nav-panel .arcane-nav-mask { display: none; }

  .mobile-guild-nav { display: grid; gap: .95rem; }

  .mobile-guild-nav-brand {
    display: grid;
    grid-template-columns: 4.35rem minmax(0, 1fr);
    align-items: center;
    gap: .8rem;
    padding: .25rem .35rem .95rem;
    border-bottom: 1px solid #d0a45b66;
    text-align: left;
  }

  .mobile-guild-nav-brand img {
    display: block;
    width: 4.35rem;
    height: 4.35rem;
    border: 1px solid #d5a750;
    border-radius: 50%;
    box-shadow: 0 .25rem .7rem #000b;
  }

  .mobile-guild-nav-brand span { display: grid; gap: .22rem; min-width: 0; }

  .mobile-guild-nav-brand strong {
    color: #f1ce7e;
    font-family: var(--va-display-face);
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-shadow: 0 1px #2e161d, 0 .18rem .35rem #000c;
  }

  .mobile-guild-nav-brand small {
    color: #d4c2ce;
    font: 700 .62rem/1.25 system-ui, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .mobile-guild-nav-group { display: grid; gap: .45rem; }

  .mobile-guild-nav-group h2 {
    margin: 0;
    padding: 0 .2rem;
    color: #e8c77c;
    font-size: .72rem;
    letter-spacing: .14em;
    text-align: left;
    text-shadow: 0 1px #1a0e18;
  }

  .mobile-guild-nav-link,
  .mobile-guild-nav-placeholder {
    display: grid;
    min-height: 3.35rem;
    padding: .58rem .85rem;
    border: 1px solid #b67a46;
    border-radius: .72rem;
    background: linear-gradient(100deg, #17151dcc, #2a2730e8 50%, #17151dcc);
    box-shadow: inset 0 0 0 1px #07060aaa, inset 0 0 .7rem #8c50a42b, 0 .2rem .45rem #0007;
    color: #eee2e9;
    font: 750 1rem/1.15 var(--va-display-face);
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px #120a13, 0 .15rem .25rem #000b;
  }

  .mobile-guild-nav-link small,
  .mobile-guild-nav-placeholder small {
    display: block;
    margin-top: .2rem;
    color: #d0bdcc;
    font: 750 .65rem/1.1 system-ui, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .mobile-guild-nav-link.is-current {
    border-color: #f0c47d;
    background: radial-gradient(ellipse at center, #9854c86e, #2d1b3ce8 66%, #17131bd9);
    color: #fff2c9;
    box-shadow: 0 0 .75rem #a756cb88, inset 0 0 0 1px #f4c98266;
  }

  .mobile-guild-nav-link:focus-visible {
    outline: 2px solid #ffe39a;
    outline-offset: 2px;
  }

  .mobile-guild-nav-placeholder {
    opacity: .6;
    color: #c7bac3;
  }

  .guild-masthead--stormwind {
    min-height: 22rem;
    padding: 1.2rem 1rem 1.45rem;
    background-position: 52% center;
  }

  .guild-masthead--stormwind .realm-ribbon { font-size: .56rem; }
  .guild-masthead--stormwind h1 { font-size: clamp(2rem, 10vw, 2.8rem); }
  .guild-masthead--stormwind .guild-masthead-home { font-size: .66rem; }
  .guild-masthead--stormwind .guild-masthead-homage { font-size: .9rem; }
}

/* Forever name reservations share the landing page's Stormwind gate and
   illustrated parchment, while retaining a clear, dark ink contrast. */
.reservation-masthead {
  min-height: clamp(15rem, 25vw, 19rem);
}

.reservation-masthead .guild-masthead-homage {
  max-width: 34rem;
  margin-top: .7rem;
}

.classic-main > .classic-parchment.reservation-sheet {
  --home-wip-sheet-height: clamp(39rem, 55vw, 47rem);
  display: grid;
  align-items: center;
  padding: clamp(2.8rem, 7vw, 5.5rem) clamp(1.25rem, 7vw, 5.25rem);
  background: #e8c985 url("/static/images/about-story-arcane-parchment-page-v2.png") center / 100% 100% no-repeat;
}

.reservation-sheet .notice {
  width: min(100%, 46rem);
  margin: 0 auto 1.2rem;
  border-color: #8a5a31;
  background: #fff0c6cc;
  color: #4b2d1d;
  box-shadow: 0 .25rem .7rem #59371733;
}

.reservation-sheet .notice.error {
  border-color: #8a352f;
  background: #f4d2c9e8;
  color: #5d211d;
}

.reservation-panel,
.reservation-admin-panel {
  width: min(100%, 50rem);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #4b3420;
  text-align: center;
}

.reservation-panel .page-kicker {
  margin-bottom: .65rem;
  color: #795326;
}

.reservation-panel h2 {
  margin: 0;
  color: #572414;
  font-family: var(--va-display-face);
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  letter-spacing: .035em;
  text-shadow: 0 1px #f8e3b7;
}

.reservation-panel h2::after {
  display: block;
  width: 4rem;
  height: 2px;
  margin: .85rem auto 1rem;
  background: linear-gradient(90deg, transparent, #8a5626, transparent);
  content: "";
}

.reservation-panel > p:not(.page-kicker) {
  max-width: 43rem;
  margin: 0 auto;
  color: #4b3420;
  font-size: clamp(.98rem, 1.65vw, 1.12rem);
  line-height: 1.65;
}

.reservation-panel > p.reservation-explainer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #8c603766;
  color: #5d4128;
  font: 700 clamp(.86rem, 1.4vw, 1rem)/1.55 system-ui, sans-serif;
}

.reservation-sheet .reservation-form {
  width: min(100%, 42rem);
  max-width: none;
  margin: 1.75rem auto 0;
  text-align: left;
}

.reservation-sheet .reservation-slots {
  display: grid;
  gap: .85rem;
}

.reservation-sheet .reservation-slot {
  min-inline-size: 0;
  margin: 0;
  padding: .85rem 1rem 1rem;
  border: 1px solid #936646;
  background: #fff0c34d;
  box-shadow: inset 0 0 0 1px #fff4d088;
}

.reservation-sheet .reservation-slot legend {
  padding: 0 .45rem;
  color: #5c321e;
  font: 800 .83rem/1 var(--va-display-face);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.reservation-sheet .reservation-slot legend small {
  margin-left: .3rem;
  color: #765331;
  font: 700 .65rem/1 system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.reservation-sheet .reservation-name-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.reservation-sheet .reservation-name-fields label {
  display: grid;
  gap: .35rem;
  color: #4c301e;
  font: 800 .84rem/1.2 system-ui, sans-serif;
}

.reservation-sheet .reservation-name-fields label span {
  color: #765b42;
  font-size: .7rem;
  font-weight: 700;
}

.reservation-sheet .reservation-name-fields input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.7rem;
  border-color: #84572e;
  background: #fff3d3e8;
  color: #382315;
  box-shadow: inset 0 1px .3rem #8b673326;
  font: 700 1rem/1.2 Georgia, "Times New Roman", serif;
}

.reservation-sheet .reservation-name-fields input:focus {
  border-color: #5c2f23;
  outline-color: #8d542f;
}

.reservation-sheet .reservation-form .field-note {
  margin: .15rem 0 .15rem;
  color: #65472f;
  font: .78rem/1.45 system-ui, sans-serif;
  text-align: center;
}

.reservation-sheet .reservation-form .button {
  justify-self: center;
  min-width: min(100%, 19rem);
  margin-top: .3rem;
}

.reservation-withdraw { margin-top: 1.15rem; }
.reservation-withdraw .text-button { color: #6a2d26; }
.reservation-withdraw .text-button:hover { color: #38130f; }
.reservation-admin-link { margin-top: 1.75rem; }
.reservation-admin-link a { color: #6d381e; }
.reservation-admin-link a:hover { color: #3e1b13; }

/* The login reminder carries the same arcane parchment surface as the public
   reservation page, while remaining a compact, dismissible dialog. */
.reservation-dialog .reservation-form {
  width: 100%;
  max-width: none;
  margin: 1.35rem 0 0;
  text-align: left;
}

.reservation-dialog .reservation-slots {
  display: grid;
  gap: .85rem;
}

.reservation-dialog .reservation-slot {
  min-inline-size: 0;
  margin: 0;
  padding: .8rem .9rem .95rem;
  border: 1px solid #8b5a35;
  background: #fff0c366;
  box-shadow: inset 0 0 0 1px #fff4d088, inset 0 0 1rem #9a6a352b;
}

.reservation-dialog .reservation-slot legend {
  padding: 0 .4rem;
  color: #5c321e;
  font: 800 .83rem/1 var(--va-display-face);
  letter-spacing: .09em;
  text-shadow: 0 1px #ffe7b5;
  text-transform: uppercase;
}

.reservation-dialog .reservation-slot legend small {
  margin-left: .3rem;
  color: #765331;
  font: 700 .65rem/1 system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.reservation-dialog .reservation-name-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.reservation-dialog .reservation-name-fields label {
  display: grid;
  gap: .35rem;
  color: #4c301e;
  font: 800 .84rem/1.2 system-ui, sans-serif;
  text-shadow: 0 1px #fff0c6;
}

.reservation-dialog .reservation-name-fields label span {
  color: #765b42;
  font-size: .7rem;
  font-weight: 700;
}

.reservation-dialog .reservation-name-fields input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.7rem;
  border-color: #84572e;
  background: #fff3d3e8;
  color: #382315;
  box-shadow: inset 0 1px .3rem #8b673326;
  font: 700 1rem/1.2 Georgia, "Times New Roman", serif;
}

.reservation-dialog .reservation-name-fields input:focus {
  border-color: #5c2f23;
  outline-color: #8d542f;
}

.reservation-dialog .reservation-form .field-note {
  margin: .75rem 0 .15rem;
  color: #65472f;
  font: .78rem/1.45 system-ui, sans-serif;
  text-align: center;
}

.reservation-dialog .reservation-form .button {
  justify-self: center;
  min-width: min(100%, 19rem);
  margin-top: .3rem;
}

.reservation-admin-panel { text-align: left; }
.reservation-admin-table { gap: .15rem; }
.reservation-admin-row {
  grid-template-columns: minmax(4rem, .55fr) minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(10rem, 1fr);
  padding: .9rem 0;
  border-top-color: #8d603766;
  color: #4b3420;
}
.reservation-admin-row strong { color: #5b2c1a; }
.reservation-admin-row--head { color: #765331; }

@media (max-width: 48rem) {
  .reservation-masthead { min-height: 17rem; }
  .classic-main > .classic-parchment.reservation-sheet {
    --home-wip-sheet-height: auto;
    min-height: 0;
    padding: 2.5rem 1rem 3rem;
    background-size: auto 100%;
  }
  .reservation-panel,
  .reservation-admin-panel { padding: .5rem; }
  .reservation-sheet .reservation-name-fields,
  .reservation-dialog .reservation-name-fields { grid-template-columns: 1fr; gap: .6rem; }
  .reservation-admin-row { grid-template-columns: 1fr; gap: .25rem; }
  .reservation-admin-row--head { display: none; }
}

/* The public addon overview belongs directly on the same illustrated
   parchment used by the landing-page notice.  Keep the tool entry open and
   centered instead of nesting a second, plain parchment panel inside it. */
.classic-main > .classic-parchment.addons-sheet {
  --addons-sheet-height: clamp(45rem, 58vw, 54rem);
  box-sizing: border-box;
  min-height: var(--addons-sheet-height);
  padding: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 10vw, 8rem);
  background: #e8c985 url("/static/images/about-story-arcane-parchment-page-v2.png") center / 100% 100% no-repeat;
  color: #4b3420;
  text-shadow: none;
}

.classic-main > .classic-parchment.addons-sheet .addons-masthead {
  max-width: 48rem;
  padding: 0 1rem clamp(2.2rem, 5vw, 3.4rem);
}

.classic-main > .classic-parchment.addons-sheet .addons-introduction {
  max-width: 45rem;
  margin: 0 auto clamp(2.4rem, 5vw, 3.4rem);
}

.classic-main > .classic-parchment.addons-sheet .addon-directory {
  max-width: 43rem;
  margin: 0 auto;
}

.classic-main > .classic-parchment.addons-sheet .addon-card--collector {
  align-items: center;
  min-height: 0;
  padding: clamp(1.25rem, 3vw, 2rem) 0 0;
  border: 0;
  border-top: 1px solid #8c60374d;
  outline: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.classic-main > .classic-parchment.addons-sheet .addon-card--collector h2 {
  font-size: clamp(1.65rem, 3.2vw, 2.3rem);
}

.classic-main > .classic-parchment.addons-sheet .addon-card--collector p:not(.page-kicker) {
  max-width: 40rem;
  margin: .85rem auto 1.35rem;
}

.classic-main > .classic-parchment.addons-sheet .addon-card-actions {
  justify-content: center;
  margin-top: 0;
}

@media (max-width: 48rem) {
  .classic-main > .classic-parchment.addons-sheet {
    --addons-sheet-height: auto;
    min-height: 0;
    padding: 3rem 1.4rem 3.5rem;
    background-size: auto 100%;
  }

  .classic-main > .classic-parchment.addons-sheet .addons-masthead {
    padding-inline: 0;
  }

  .classic-main > .classic-parchment.addons-sheet .addons-introduction {
    text-align: center;
  }
}