:root {
  --night: #100d09;
  --night-2: #1d1710;
  --cream: #f5ead4;
  --muted: #bfaf96;
  --copper: #dfbd78;
  --wine: #372817;
  --paper: #100d09;
  --ink: #f5ead4;
  --clay: #dfbd78;
  --rule: #51412a;
  --line: rgba(223, 189, 120, .25);
  --gold-hover: #efd39a;
  --surface: #1d1710;
  --surface-soft: #292015;
}

body, body.member-mode { background: var(--night); color: var(--cream); }
.nav, body > footer { background: var(--night); border-color: var(--rule); }
.logo, .logo i, body > footer .logo { color: var(--copper); }
.logo-wordmark { border-color: var(--rule); }
.nav .join, .signup-submit, .hero .signup-submit, .newsletter-form button {
  background: var(--copper); border-color: var(--copper); color: var(--night);
}
.nav .join:hover, .signup-submit:hover, .hero .signup-submit:hover, .newsletter-form button:hover {
  background: var(--gold-hover); border-color: var(--gold-hover); color: var(--night);
}
.language-switcher button { color: var(--muted); }
.language-switcher button.active, .language-switcher button:hover { background: var(--surface-soft); color: var(--copper); }

.home-artwork { position: relative; background: var(--night); }
.home-faq { padding: clamp(48px, 6vw, 90px) max(24px, calc((100vw - 1080px) / 2)); border-top: 1px solid var(--rule); }
.home-faq h2 { margin: 0 0 24px; color: var(--copper); font-size: clamp(30px, 4vw, 48px); line-height: 1.25; }
.home-faq p { max-width: 72ch; color: var(--muted); font-size: 15px; line-height: 1.9; }
.home-faq details { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.home-faq summary { cursor: pointer; font-size: 16px; color: var(--cream); }
.home-faq summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 6px; }
.home-faq .cta { margin-top: 28px; }
.home-artwork > img { display: block; width: 100%; height: auto; }
.home-welcome-ar {
  margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--rule);
  color: var(--copper); text-align: center;
  font-family: "Noto Sans Arabic", sans-serif; font-size: clamp(16px, 2vw, 22px); line-height: 1.9;
}
.artwork-join {
  position: absolute; inset: 78.6% auto auto 10.2%; width: 24.6%; height: 7.5%;
  display: flex; align-items: center; justify-content: center; gap: 1.2em;
  border: 1px solid var(--copper); border-radius: 999px;
  background: #100d09; color: var(--gold-hover); text-decoration: none;
  font-family: Manrope, sans-serif; font-size: clamp(10px, 1.05vw, 18px);
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  transition: background .2s, color .2s, transform .2s;
}
.artwork-join:hover { background: var(--copper); color: var(--night); transform: translateY(-2px); }
.hero {
  min-height: 0; padding-block: clamp(45px, 6vw, 90px); background: var(--night);
  border-bottom: 1px solid var(--rule); color: var(--cream);
}
.hero-copy { padding-block: 0; }
.hero .kicker, html[dir] .hero h1 em { color: var(--copper); }
.hero-copy > p, .hero .proof { color: var(--muted); }
.hero .hero-audience { background: var(--surface); color: var(--cream); border-color: var(--copper); }
.hero-actions .cta { background: var(--copper); color: var(--night); border-color: var(--copper); }
.hero-actions .cta:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.hero-discover { text-decoration-color: var(--copper); }
.hero-discover:hover { color: var(--copper); }
.hero .closing, .closing .profile-form { background: var(--surface); border-color: var(--rule); box-shadow: none; }
.hero .closing .kicker, .hero .closing h2 em { color: var(--copper); }
.hero .auth-tabs button { color: var(--muted); }
.auth-tabs button[aria-selected="true"], .hero .auth-tabs button[aria-selected="true"] {
  background: var(--copper); border-color: var(--copper); color: var(--night);
}
.field input, .hero .field input { background: var(--night); color: var(--cream); border-color: var(--rule); color-scheme: dark; }
.hero .field label { color: var(--cream); }
.field small, .signup-options, .form-status, .hero .field small, .hero .signup-options,
.hero .form-status, .signup-form .form-status, .account-panel p, .closing .profile-form-head p, .closing .profile-consent {
  color: var(--muted);
}
.hero .signup-options input { accent-color: var(--copper); }
.form-status.error, .hero .form-status.error { color: #eea18b; }
.form-status.success, .hero .form-status.success { color: #c8d1a1; }
.intro-text, .example-note, .profile-info > p, .newsletter p, .chips span,
body > footer > span, body > footer > p { color: var(--muted); }
.discover, .newsletter { background: var(--surface); }
.profile, .profile:first-child, .empty { background: var(--night); border-color: var(--rule); }
.profile-portrait { background: var(--surface-soft); border-color: var(--rule); color: var(--copper); }
.profile-sample { color: var(--muted); border-color: var(--rule); }
.chips span, .filters, .filters button, .newsletter-form { border-color: var(--rule); }
.filters button { color: var(--muted); }
.filters button.active, .filters button:hover { background: var(--copper); color: var(--night); border-color: var(--copper); }
.trust { background: var(--night); color: var(--cream); }
.trust-copy > p, .trust-item > p { color: var(--muted); }
.trust-item summary { color: var(--cream); }
.trust-item summary > b:first-child { color: var(--copper); }
.trust .section-no { color: var(--copper); }
.closing .choice-pill span { color: var(--muted); }
.closing .choice-pill input:checked + span, .closing .profile-submit { background: var(--copper); color: var(--night); }

#member-space, #member-space[data-view="members"] {
  --ms-paper: var(--night);
  --ms-white: var(--surface);
  --ms-ink: var(--cream);
  --ms-muted: var(--muted);
  --ms-border: var(--rule);
  --ms-accent: var(--copper);
  --ms-soft: var(--surface-soft);
  background: var(--ms-paper); color-scheme: dark;
}
.ms-brand, .ms-monogram { color: var(--ms-accent); border-color: var(--ms-border); }
.ms-circle-hero { background: var(--ms-soft); color: var(--ms-ink); }
.ms-circle-copy .ms-eyebrow, .ms-circle-word, .ms-circle-caption, .ms-hero-number { color: var(--ms-accent); }
.ms-circle-copy > p { color: var(--ms-muted); }
.ms-circle-art, .ms-circle-art:before, .ms-circle-art:after { border-color: var(--ms-border); }
.ms-primary, .ms-circle-hero .ms-primary, #member-space[data-view="members"] .ms-primary {
  background: var(--ms-accent); border-color: var(--ms-accent); color: var(--night);
}
.ms-primary:hover, .ms-circle-hero .ms-primary:hover, #member-space[data-view="members"] .ms-primary:hover {
  background: var(--gold-hover); border-color: var(--gold-hover); color: var(--night);
}
.ms-entry:hover, .ms-member-card:hover { background: var(--ms-soft); }
.ms-avatar, .ms-tone-0, .ms-tone-1, .ms-tone-2, .ms-tone-3 { background: var(--ms-soft); color: var(--ms-accent); }
.ms-empty-members { background: var(--ms-soft); }
.ms-welcome-image { background-image: linear-gradient(0deg, #100d09bb, transparent), url('/assets/community-together.jpg'); }
.ms-welcome-image > span { color: var(--cream); }
.ms-dialog { box-shadow: 0 25px 80px #100d0980; }
.ms-dialog::backdrop { background: #100d09b3; }
.ms-dialog .profile-status.error { color: #eea18b; }
.ms-dialog .profile-status.success { color: #c8d1a1; }
.ms-dialog .profile-submit { background: var(--ms-accent); color: var(--night); }
.ms-dialog .profile-submit:hover { background: var(--gold-hover); }
.ms-skeleton, #member-space[data-view="members"] .ms-skeleton {
  background-image: linear-gradient(90deg, var(--ms-soft) 25%, var(--ms-white) 50%, var(--ms-soft) 75%);
}
.ms-filter-heading, .ms-filter-window { background: var(--ms-white); }
.ms-filter-fields legend { color: var(--ms-ink); }
.ms-filter-check input { accent-color: var(--ms-accent); }
#member-space .ms-filter-switch input { background: var(--ms-soft); }
#member-space .ms-filter-switch input:checked { background: var(--ms-accent); }
#member-space .ms-filter-fields input[aria-invalid="true"] { border-color: #eea18b; }
.ms-result-tabs > span, #member-space .ms-active-filters svg { color: var(--ms-muted); }
#member-space[data-view="members"] .ms-directory .ms-member-card { background: var(--ms-white); }
#member-space[data-view="members"] .ms-directory .ms-avatar { background: #332719; color: var(--ms-accent); }
#member-space[data-view="members"] .ms-directory .ms-tone-1 { background: #40301e; color: #efd39a; }
#member-space[data-view="members"] .ms-directory .ms-tone-2 { background: #2b2117; color: #d9bd8b; }
#member-space[data-view="members"] .ms-directory .ms-tone-3 { background: #493722; color: #f5ead4; }

@media (max-width: 760px) {
  .home-artwork { padding-bottom: 22px; }
  .artwork-join {
    position: relative; inset: auto; width: fit-content; min-height: 46px;
    margin: 20px auto 0; padding: 12px 24px; font-size: 12px;
  }
  .hero { padding: 32px 20px 48px; }
  .hero .closing { background: var(--surface); }
}