@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Nunito+Sans:wght@400;600;700;800;900&display=swap");

:root {
  --motr-navy: #101b26;
  --motr-navy-2: #182838;
  --motr-gold: #c3922e;
  --motr-gold-light: #e0bb64;
  --motr-paper: #fbf8f1;
  --motr-paper-2: #f1e7d6;
  --motr-ink: #191711;
  --motr-muted: #6f6758;
  --motr-line: #ded5c3;
}

body.brand-shell {
  background: var(--motr-paper);
  color: var(--motr-ink);
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.brand-shell h1,
body.brand-shell h2,
body.brand-shell h3,
body.brand-shell h4 {
  font-family: "Merriweather", serif;
}

body.brand-shell > nav {
  min-height: 68px;
  height: auto;
  padding: 0 max(22px, 5vw);
  background: rgba(16, 27, 38, .98);
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}

body.brand-shell > nav a {
  color: rgba(255, 255, 255, .7);
  font-family: "Nunito Sans", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.brand-shell > nav .brand,
body.brand-shell > nav .nav-logo,
body.brand-shell > nav .wordmark {
  color: #fff;
  font-family: "Merriweather", serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.brand-shell > nav .wordmark svg text {
  fill: #fff;
}

body.brand-shell > nav .wordmark svg text:first-of-type {
  fill: var(--motr-gold-light);
}

body.brand-shell .btn,
body.brand-shell .hero-cta,
body.brand-shell .btn-g,
body.brand-shell .btn-gold,
body.brand-shell .btn-panel,
body.brand-shell .notify-btn {
  border: 0;
  border-radius: 5px;
  background: var(--motr-gold);
  color: #15120d;
  font-family: "Nunito Sans", sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body.brand-shell .hero-cta.secondary,
body.brand-shell .btn.secondary,
body.brand-shell .btn-o,
body.brand-shell .btn-outline,
body.brand-shell .btn-panel-outline {
  border-color: var(--motr-line);
  border-radius: 5px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.brand-shell > .hero,
body.brand-shell > header.hero,
body.brand-shell > .book-hero {
  background:
    radial-gradient(circle at top right, rgba(195, 146, 46, .22), transparent 30%),
    linear-gradient(135deg, var(--motr-navy), var(--motr-navy-2));
  color: #fff;
}

body.brand-shell > .hero .hero-eyebrow,
body.brand-shell > header.hero .eyebrow,
body.brand-shell > .book-hero .pre,
body.brand-shell > .book-hero .byline {
  color: var(--motr-gold-light);
}

body.brand-shell > .hero h1,
body.brand-shell > header.hero h1,
body.brand-shell > .book-hero h1 {
  color: #fff;
  font-weight: 900;
}

body.brand-shell > .hero p,
body.brand-shell > header.hero p,
body.brand-shell > .book-hero p {
  color: rgba(255, 255, 255, .74);
}

body.brand-shell > .hero .hero-cta.secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

body.brand-shell > .hero .shelf-floor {
  background: linear-gradient(to right, transparent, rgba(224, 187, 100, .36) 20%, rgba(224, 187, 100, .36) 80%, transparent);
}

body.brand-shell > footer,
body.brand-shell > .footer {
  background: var(--motr-navy);
  border-color: rgba(224, 187, 100, .18);
  color: rgba(255, 255, 255, .58);
}

body.brand-shell > footer a,
body.brand-shell > .footer a {
  color: var(--motr-gold-light);
}

@media (max-width: 720px) {
  body.brand-shell > nav {
    min-height: 64px;
    padding: 0 18px;
  }

  body.brand-shell > nav .nav-links,
  body.brand-shell > nav .links {
    gap: 12px;
  }
}