/* Legendary — crest branding */

:root {
  --lgnd-wm-top: #d8ab33;
  --lgnd-wm-mid: #b07d1e;
  --lgnd-wm-bot: #7c560f;
  --lgnd-rule: linear-gradient(90deg, transparent, #c79a34 45%, #f3d680 50%, #c79a34 55%, transparent);
}
[data-md-color-scheme="slate"] {
  --lgnd-wm-top: #fff4c2;
  --lgnd-wm-mid: #ecc25f;
  --lgnd-wm-bot: #c08f2b;
}

/* Header crest a touch larger than the Material default */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.05rem;
  width: auto;
}

/* Wider content area. Material caps .md-grid at 61rem, which leaves ~290px
   of empty gutter on each side at 1080p and grows worse on bigger monitors.
   A viewport-proportional cap keeps a slim, consistent margin at any width. */
.md-grid {
  max-width: min(99vw, 120rem);
}

/* Homepage hero */
.lgnd-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  margin: 1.2rem 0 2.4rem;
}
.lgnd-hero__crest {
  width: clamp(132px, 22vw, 196px);
  height: auto;
  filter: drop-shadow(0 0 12px rgba(255, 120, 30, .38))
          drop-shadow(0 8px 22px rgba(190, 70, 15, .45));
}
.lgnd-hero__title {
  font-family: Georgia, "Times New Roman", "Iowan Old Style", serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: .10em;
  margin: .55rem 0 0;
  padding-left: .10em; /* optical centering for the tracked caps */
  background: linear-gradient(180deg, var(--lgnd-wm-top), var(--lgnd-wm-mid) 55%, var(--lgnd-wm-bot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lgnd-hero__subtitle {
  font-size: clamp(.7rem, 1.6vw, .82rem);
  font-weight: 700;
  letter-spacing: .42em;
  padding-left: .42em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin: 0;
}
.lgnd-hero__rule {
  width: min(320px, 70%);
  height: 2px;
  border: 0;
  margin: .7rem 0 .15rem;
  background: var(--lgnd-rule);
}
.lgnd-hero__tagline {
  font-size: clamp(.92rem, 2vw, 1.08rem);
  font-style: italic;
  color: var(--md-default-fg-color--light);
  margin: 0;
}

/* Themed crest-style emblem at the top of a content page */
.lgnd-emblem {
  display: block;
  width: clamp(104px, 15vw, 144px);
  height: auto;
  margin: .1rem auto 1.5rem;
  filter: drop-shadow(0 0 10px rgba(255, 120, 30, .3))
          drop-shadow(0 5px 14px rgba(120, 60, 12, .4));
}