@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); }

body {
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

.wrap { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

.design-switch {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2000;
  padding: 0.65rem 1.1rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
}

.design-switch:hover { color: var(--gold-light); }

@media (max-width: 768px) {
  html { scroll-padding-top: calc(68px + 0.75rem); }

  body { padding-bottom: 4.5rem; }

  .wrap { width: min(var(--max), calc(100% - 1.25rem)); }

  .design-switch {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    padding: 0.55rem 0.9rem;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none !important; }
}