:root {
  --navy: #0e2740;
  --navy-light: #173a5c;
  --navy-deep: #0a1d30;
  --gold: #d6af5a;
  --gold-soft: #b8873a;
  --cream: #f2e6cc;
  --paper: #faf8f3;
  --ink: #1c2a38;

  /* RGB-triplet mirrors of the tokens above, for use inside rgb(var(--x-rgb)/NN%)
     in Tailwind arbitrary values. Tailwind's CDN build (v3.4.x) cannot decompose a
     var() arbitrary value into channels, so opacity-modifier utilities like
     bg-[var(--navy)]/95 silently generate no CSS rule at all. Wrapping the same
     token as rgb(var(--navy-rgb)/95%) sidesteps that limitation while keeping a
     single source of truth for each color. Keep these in sync with the hex values
     above if a color ever changes. */
  --navy-rgb: 14 39 64;
  --gold-rgb: 214 175 90;
  --cream-rgb: 242 230 204;
  --ink-rgb: 28 42 56;

  /* Brand-derived error tone (clay/rust red) — used only for the contact
     form's validation/error banner. Never use Tailwind's default red-* scale
     directly; this keeps the "error" signal recognizable while staying in
     the site's warm palette rather than a generic default-Tailwind color. */
  --error: #b23a2e;
  --error-rgb: 178 58 46;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

.font-serif-brand {
  font-family: Georgia, 'Times New Roman', serif;
}

/* Layered, color-tinted shadows (never flat shadow-md) */
.shadow-card {
  box-shadow:
    0 1px 2px rgba(14, 39, 64, 0.06),
    0 8px 20px -4px rgba(14, 39, 64, 0.18),
    0 2px 6px -1px rgba(214, 175, 90, 0.12);
}
.shadow-card-hover:hover {
  box-shadow:
    0 2px 4px rgba(14, 39, 64, 0.08),
    0 16px 32px -6px rgba(14, 39, 64, 0.24),
    0 4px 10px -2px rgba(214, 175, 90, 0.22);
}

/* Mobile nav */
#mobile-nav {
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
#mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
#nav-toggle .bar {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
#nav-toggle.is-open .bar-1 { transform: translateY(6px) rotate(45deg); }
#nav-toggle.is-open .bar-2 { opacity: 0; }
#nav-toggle.is-open .bar-3 { transform: translateY(-6px) rotate(-45deg); }

/* History accordion (native <details>, styled) */
details.history-accordion summary {
  cursor: pointer;
  list-style: none;
}
details.history-accordion summary::-webkit-details-marker { display: none; }
details.history-accordion .chevron {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
details.history-accordion[open] .chevron {
  transform: rotate(180deg);
}

/* Gallery + lightbox */
.gallery-grid img {
  cursor: zoom-in;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-grid img:hover {
  transform: scale(1.03);
}
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 30, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
#lightbox img {
  max-width: 90vw;
  max-height: 82vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#lightbox.is-open img {
  opacity: 1;
  transform: scale(1);
}
.lightbox-btn {
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.lightbox-btn:hover { transform: scale(1.08); }
.lightbox-btn:active { transform: scale(0.96); }

/* Focus visibility everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}