@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --gold:       #c9a84c;
  --gold-light: #e8c97a;
  --dark:       #0a0a0f;
  --dark2:      #111118;
  --dark3:      #1a1a26;
  --dark4:      #22222f;
  --text:       #e8e4d9;
  --text-muted: #8a8578;
  --border:     rgba(201,168,76,0.2);
  --red:        #e05c5c;
  --nav-h:      64px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Inter', sans-serif; background: var(--dark); color: var(--text); }

/* ── Pages ── */
.page { display: none; padding-top: var(--nav-h); min-height: 100vh; }
.page.active { display: block; }

/* ── Shared buttons ── */
.btn-primary {
  background: linear-gradient(135deg, var(--gold), #a8722e);
  color: #000; border: none;
  padding: 0.9rem 2.2rem;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 4px; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

.btn-ghost {
  background: none; color: var(--gold); border: 1px solid var(--gold);
  padding: 0.9rem 2.2rem;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: 4px; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.btn-ghost:hover { background: rgba(201,168,76,0.1); transform: translateY(-1px); }

.btn-ghost-sm {
  background: none; color: var(--text-muted); border: 1px solid var(--border);
  padding: 0.9rem 1.6rem;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 4px; cursor: pointer; transition: all 0.2s;
}
.btn-ghost-sm:hover { color: var(--gold); border-color: var(--gold); }

/* ── Section helpers ── */
.section-label {
  font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.75rem; font-weight: 500;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 700; margin-bottom: 1.25rem;
}
.section-text { color: var(--text-muted); line-height: 1.8; font-size: 1rem; max-width: 640px; font-weight: 300; }
.gold-line { width: 60px; height: 2px; background: var(--gold); margin: 1.5rem 0; }

/* ── Page header (Exhibits / About / Contact) ── */
.page-header {
  padding: 4rem 2rem 3rem; text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-header-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; z-index: 0; }
.page-header-content { position: relative; z-index: 1; }

/* ── Footer ── */
footer { border-top: 1px solid var(--border); padding: 3rem 2rem 2rem; text-align: center; }
.footer-logo { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.footer-logo-mark { width: 38px; height: 38px; }
.footer-logo-text { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--gold); }
.footer-social { display: flex; gap: 0.75rem; justify-content: center; margin-bottom: 1.25rem; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); text-decoration: none; transition: all 0.2s;
}
.footer-social a:hover { border-color: var(--gold); color: var(--gold); }
.footer-links { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.25rem; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.78rem; color: var(--text-muted); text-decoration: none;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  transition: color 0.2s; cursor: pointer;
}
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 0.75rem; color: var(--text-muted); }
.footer-copy span { color: var(--gold); }

/* ── Mobile ── */
@media (min-width: 769px) {
  .nav-hamburger { display: none !important; }
  .mobile-menu   { display: none !important; }
}
@media (max-width: 768px) {
  .page-header { padding: 3rem 1.25rem 2rem; }
}
@media (max-width: 480px) {
  .nav-logo-text { font-size: 1rem; }
}