*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  background: var(--theme-bg);
  color: var(--theme-text);
  font-family: "Outfit", sans-serif;
  height: 100vh;             /* Safari fallback */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background 0.35s, color 0.35s;
}

/* ── Background portrait ── */
.bg-megan {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  filter: grayscale(40%) contrast(1.05);
  transition: opacity 0.35s;
}
[data-theme="light"] .bg-megan { opacity: 0.07; }
[data-theme="gold"]  .bg-megan { opacity: 0.12; filter: grayscale(100%) sepia(30%); }

.bg-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(7,11,20,0.55) 0%,
    rgba(7,11,20,0.15) 40%,
    rgba(7,11,20,0.78) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s;
}
[data-theme="light"] .bg-overlay { opacity: 0.3; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }