:root {
  /* BACKGROUNDS */
  --background-dark: #050b5f;
  --background-darker: #02063b;
  --background-light: #f7f5ef;
  --background-soft: #dce9f7;
  --background-white: #ffffff;
  --background-red: #8a0707;

  /* TEXT */
  --text-dark: #15182e;
  --text-light: #ffffff;
  --text-muted: #5f6780;

  /* ACCENTS */
  --highlight: #c89a4b;
  --highlight-soft: rgba(200, 154, 75, 0.12);

  /* BORDERS */
  --border-soft: rgba(5, 11, 95, 0.12);
  --border-dashed: rgba(5, 11, 95, 0.18);

  /* SHADOWS */
  --shadow-soft: rgba(5, 11, 95, 0.08);
  --shadow-medium: rgba(5, 11, 95, 0.16);

  /* MEMBERSHIP COLORS */
  --bronze: #8f5a2a;
  --bronze-soft: rgba(143, 90, 42, 0.14);
  --bronze-text: #5e3412;

  --silver: #6f7b8d;
  --silver-soft: rgba(111, 123, 141, 0.18);
  --silver-text: #2f3a49;

  --gold: #e0b84f;
  --gold-soft: rgba(224, 184, 79, 0.18);
  --gold-text: #8a6708;

  --platinum: #4e79a7;
  --platinum-soft: rgba(78, 121, 167, 0.18);
  --platinum-text: #183b63;

  /* GRADIENTS */
  --hero-gradient: linear-gradient(
    120deg,
    rgba(220, 233, 247, 0.95),
    rgba(255, 237, 222, 0.92)
  );

  --page-gradient: linear-gradient(
    180deg,
    #eef2f8 0%,
    #f7f4ee 45%,
    #ece6db 100%
  );

  /* RESPONSIVE SIZING */
  --page-padding: clamp(1rem, 4vw, 3rem);
  --section-gap: clamp(2rem, 6vw, 4.5rem);

  --content-sm: 40rem;
  --content-md: 56rem;
  --content-lg: 70rem;

  --radius-sm: 0.75rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.875rem;
  --radius-pill: 999px;

  --space-xs: clamp(0.4rem, 1vw, 0.65rem);
  --space-sm: clamp(0.75rem, 2vw, 1rem);
  --space-md: clamp(1rem, 3vw, 1.5rem);
  --space-lg: clamp(1.5rem, 4vw, 2rem);
  --space-xl: clamp(2rem, 6vw, 3rem);

  --font-sm: clamp(0.82rem, 1.5vw, 0.95rem);
  --font-base: clamp(1rem, 2vw, 1.1rem);
  --font-md: clamp(1.1rem, 2.5vw, 1.35rem);
  --font-lg: clamp(1.8rem, 5vw, 3rem);
  --font-xl: clamp(2.4rem, 7vw, 4rem);

  --photo-padding: clamp(0.5rem, 1.3vw, 0.75rem);
  --photo-bottom: clamp(2.25rem, 5vw, 3.25rem);
  --shadow-photo:
    0 0.65rem 1.4rem rgba(8, 21, 105, 0.12),
    0 1.5rem 3rem rgba(8, 21, 105, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--background-light);
  color: var(--text-dark);
  font-family: "Montserrat", Arial, sans-serif;
}

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

/* HEADER */

.site-header {
  position: relative;
  z-index: 1000;
  background: var(--background-dark);
  color: var(--text-light);
  border-bottom: 0.125rem solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.header-inner {
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: clamp(0.85rem, 2.2vw, 1.125rem) var(--page-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1rem);
  min-width: 0;
  flex-shrink: 0;
}

.brand img {
  width: clamp(3.25rem, 7vw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--background-white);
  object-fit: cover;
  box-shadow: 0 0.25rem 0.9rem rgba(0, 0, 0, 0.12);
}

.brand h1 {
  margin: 0;
  color: var(--text-light);
  font-family: Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 2.125rem);
  font-weight: 500;
  line-height: 1;
}

.brand p {
  margin: 0.3rem 0 0;
  color: var(--highlight);
  font-size: clamp(0.55rem, 1.3vw, 0.75rem);
  letter-spacing: clamp(0.08rem, 0.35vw, 0.125rem);
  text-transform: uppercase;
}

/* NAV */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.625rem);
  margin-left: auto;
  font-weight: 700;
}

.nav a {
  opacity: 0.92;
  transition: 0.2s ease;
}

.nav a:hover {
  color: var(--highlight);
  opacity: 1;
}

.login-link {
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--highlight);
  border-radius: var(--radius-pill);
}

.login-link:hover {
  background: var(--highlight);
  color: var(--background-dark);
}

.nav-toggle {
  display: none;
  border: 0;
  border-radius: 50%;
  background: var(--highlight-soft);
  color: var(--text-light);
  cursor: pointer;
}

/* USER DROPDOWN */

.user-dropdown {
  position: relative;
}

.user-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--highlight);
  border-radius: var(--radius-pill);
  background: var(--highlight-soft);
  color: var(--text-light);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s ease;
}

.user-trigger:hover {
  background: var(--highlight);
  color: var(--background-dark);
}

.dropdown-arrow {
  font-size: 0.65rem;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 1000;
  min-width: 11.25rem;
  padding: 0.65rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--background-white);
  box-shadow: 0 1.125rem 2.5rem var(--shadow-medium);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.4rem);
  transition: 0.2s ease;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a,
.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dark);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: var(--background-soft);
}

/* FOOTER */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(1.75rem, 4vw, 2rem) var(--page-padding);
  margin-top: 0;
  border-top: 0.2rem solid var(--highlight);
  background: var(--background-dark);
  color: var(--text-light);
  box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.site-footer p {
  margin: 0.25rem 0 0;
  color: rgba(255, 255, 255, 0.72);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 3vw, 1.25rem);
}

.footer-links a,
.footer-logout {
  color: var(--text-light);
  transition: 0.2s ease;
}

.footer-links a:hover,
.footer-logout:hover {
  color: var(--highlight);
}

.footer-logout {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* LOCKED OUT VIEW */

.locked-card {
  width: min(100%, 42.5rem);
  margin: var(--section-gap) auto;
  padding: clamp(2rem, 5vw, 2.65rem) var(--space-lg);
  text-align: center;
  background: var(--background-white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.125rem 2.8rem var(--shadow-soft);
}

.locked-card h1 {
  margin: 0 0 0.9rem;
  color: var(--background-dark);
  font-family: Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4rem);
}

.locked-card p {
  max-width: 31rem;
  margin: 0 auto 1.5rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.locked-card .eyebrow {
  margin-bottom: 0.65rem;
  color: var(--highlight);
}

.locked-btn {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-pill);
  background: var(--background-dark);
  color: var(--text-light);
  font-weight: 900;
}

/* MOBILE */

@media (max-width: 700px) {
  .header-inner {
    padding: 0.85rem var(--page-padding);
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(3.25rem, 13vw, 3.8rem);
    aspect-ratio: 1;
    font-size: clamp(1.65rem, 7vw, 2rem);
  }

  .nav {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--page-padding);
    z-index: 2000;
    width: min(12rem, 70vw);
    padding: 0.65rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: var(--background-dark);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: 0 0.75rem 1.75rem var(--shadow-medium);
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    display: block;
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 700;
  }

  .nav a:hover {
    background: var(--highlight-soft);
  }

  .login-link {
    width: 100%;
    margin-top: 0.4rem;
    text-align: center;
    background: var(--shadow-soft);
  }

  .brand img {
    width: clamp(3.1rem, 13vw, 3.5rem);
  }

  .brand h1 {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .brand p {
    font-size: clamp(0.5rem, 2.5vw, 0.65rem);
    letter-spacing: 0.09rem;
  }

  .site-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-footer > div:first-child {
    max-width: 18rem;
  }

  .footer-links {
    justify-content: center;
  }

  .locked-card {
    margin: var(--section-gap) auto;
    border-radius: var(--radius-md);
  }
}