@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

html body { background: #0C0D0E !important; color: #E8E4DC !important; font-family: 'Inter', sans-serif !important; }

html body .account-section { background: #0C0D0E !important; padding-top: 60px !important; padding-bottom: 60px !important; }

html body .account-section .account-login-form form,
html body .account-section .account-login-form .account-login-form form,
html body .account-section form {
  background-color: #16181B !important;
  background: #16181B !important;
  border: 1px solid #22252A !important;
  border-radius: 20px !important;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 48px !important;
  color: #E8E4DC !important;
}

html body .account-section .form-header { padding-top: 0 !important; border-bottom: 1px solid #22252A !important; padding-bottom: 28px !important; margin-bottom: 28px !important; }
html body .account-section .form-header h1,
html body .account-section .form-header h2,
html body .account-section .form-header h3,
html body .account-section .form-title,
html body .account-section .form-header .form-title {
  font-family: 'Fraunces', serif !important;
  color: #E8E4DC !important;
  font-weight: 400 !important;
  font-size: 36px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
html body .account-section .form-header p,
html body .account-section .form-header .form-desc { color: #B8B4AB !important; font-size: 15px !important; font-weight: 300 !important; }

html body .account-section label { color: #B8B4AB !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-weight: 500 !important; }

html body .account-section .form--control,
html body .account-section .form-control,
html body .account-section input[type="text"],
html body .account-section input[type="email"],
html body .account-section input[type="password"] {
  background: #0C0D0E !important;
  background-color: #0C0D0E !important;
  border: 1px solid #22252A !important;
  color: #E8E4DC !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-family: 'Inter', sans-serif !important;
}
html body .account-section .form--control:focus,
html body .account-section input:focus { border-color: #89D1EA !important; box-shadow: 0 0 0 3px rgba(137,209,234,0.15) !important; outline: none !important; }
html body .account-section .form--control::placeholder { color: #55534E !important; }

html body .account-section .btn--base,
html body .account-section button[type="submit"] {
  background: #E8E4DC !important;
  color: #0C0D0E !important;
  border: none !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  padding: 14px 24px !important;
}
html body .account-section .btn--base:hover { background: #FFFFFF !important; }

html body .account-section a { color: #89D1EA !important; }
html body .account-section a:hover { color: #A8DEF0 !important; }

html body header, html body nav { background: #0C0D0E !important; }

/* Footer: kill the light background image + dark it */
html body .footer-section,
html body .footer-section.bg_img,
html body .footer-section.bg-overlay-banner {
  background: #0C0D0E !important;
  background-image: none !important;
}
html body .footer-section::before,
html body .footer-section::after {
  display: none !important;
}
html body .footer-section .footer-widget-heading,
html body .footer-section .footer-widget h4,
html body .footer-section h4 {
  color: #E8E4DC !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
}
html body .footer-section .footer-text,
html body .footer-section .footer-widget p,
html body .footer-section a {
  color: #B8B4AB !important;
}
html body .footer-section a:hover { color: #89D1EA !important; }
html body .footer-section .footer-social-icon a {
  background: #16181B !important;
  color: #89D1EA !important;
  border: 1px solid #22252A !important;
}
html body .footer-section input[type="email"] {
  background: #0C0D0E !important;
  border: 1px solid #22252A !important;
  color: #E8E4DC !important;
}
html body .footer-section input[type="email"]::placeholder { color: #55534E !important; }
html body .footer-section button[type="submit"],
html body .footer-section .btn--base {
  background: #89D1EA !important;
  color: #0C0D0E !important;
}

/* Copyright section darker too */
html body .copyright-section,
html body .footer-bottom {
  background: #0C0D0E !important;
  border-top: 1px solid #22252A !important;
  color: #8A8880 !important;
}
html body .copyright-section a { color: #89D1EA !important; }


/* Force footer headings visible */
html body footer h1, html body footer h2, html body footer h3, html body footer h4, html body footer h5, html body footer h6,
html body .footer-section h1, html body .footer-section h2, html body .footer-section h3, html body .footer-section h4, html body .footer-section h5, html body .footer-section h6,
html body .footer-widget-heading,
html body footer .subscribe-title {
  color: #E8E4DC !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
}

html body hr, html body .divider { border-color: #22252A !important; background: #22252A !important; }


/* HEADER === Editorial nav */
html body .header-section,
html body header.header-section,
html body .header {
  background: #0C0D0E !important;
  border-bottom: 1px solid #22252A !important;
  box-shadow: none !important;
}
html body .header-bottom-area { background: #0C0D0E !important; }
html body .navbar { background: transparent !important; }

/* Brand/Logo text */
html body .header .navbar-brand,
html body .header a.logo,
html body .header .logo {
  font-family: 'Fraunces', serif !important;
  color: #E8E4DC !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  font-size: 22px !important;
}
html body .header .navbar-brand *,
html body .header a.logo *,
html body .header .logo * {
  color: #E8E4DC !important;
}

/* Nav menu items */
html body .header .main-menu > li > a,
html body .header .navbar-nav > li > a,
html body .header .navbar-nav .nav-link {
  color: #B8B4AB !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  text-transform: none !important;
}
html body .header .main-menu > li > a:hover,
html body .header .navbar-nav > li > a:hover,
html body .header .navbar-nav .nav-link:hover,
html body .header .main-menu > li.active > a {
  color: #E8E4DC !important;
}

/* Log In button (ghost) */
html body .header .header-action .btn.btn--base:first-child,
html body .header .header-action a[href*="login"] {
  background: transparent !important;
  color: #E8E4DC !important;
  border: 1px solid #333740 !important;
  border-radius: 100px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
}

/* Sign Up button (cyan) */
html body .header .header-action a[href*="register"],
html body .header .header-action .btn-active,
html body .header .header-action a.btn-active {
  background: #89D1EA !important;
  color: #0C0D0E !important;
  border: none !important;
  border-radius: 100px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
}

/* Help link */
html body .header a[href*="help"],
html body .header .help-link { color: #B8B4AB !important; }
html body .header a[href*="help"]:hover { color: #E8E4DC !important; }

/* Language dropdown & dark-light toggle */
html body .header .lang-select,
html body .header select {
  background: #16181B !important;
  border: 1px solid #22252A !important;
  color: #E8E4DC !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
}
html body .header .dark-light { display: none !important; }

/* Kill any theme blue used in the header */
html body .header [style*="color: rgb(51, 155, 234)"],
html body .header [style*="color:#339beb"],
html body .header .text-primary { color: #E8E4DC !important; }