/* Shared site styles — loaded on every page after Tailwind CDN + config. */

* { font-family: 'Inter', sans-serif; }
h1, h2, h3, h4, .font-head { font-family: 'Fraunces', serif; }

h1, h2 { letter-spacing: -0.02em; }
p, li { line-height: 1.7; }

/* Subtle grain texture for hero/dark sections */
.grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 2;
}

/* Buttons */
.btn-primary {
  display: inline-block;
  background: #4169E1;
  color: #F7F5F0;
  box-shadow: 4px 4px 0 0 #D4AF37;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover  { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #D4AF37; }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #D4AF37; }
.btn-primary:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }

.btn-outline {
  display: inline-block;
  border: 1.5px solid rgba(247,245,240,0.35);
  color: #F7F5F0;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.btn-outline:hover  { border-color: rgba(247,245,240,0.7); background: rgba(247,245,240,0.08); transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); }
.btn-outline:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }

.btn-gold {
  display: inline-block;
  background: #D4AF37;
  color: #040524;
  box-shadow: 4px 4px 0 0 #040524;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-gold:hover  { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 #040524; }
.btn-gold:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 #040524; }
.btn-gold:focus-visible { outline: 2px solid #040524; outline-offset: 3px; }

/* Cards */
.card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(4,5,36,0.04), 0 8px 24px rgba(4,5,36,0.06);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(4,5,36,0.06), 0 16px 40px rgba(4,5,36,0.1); }

/* Form fields */
.field {
  width: 100%;
  border: 1.5px solid #D8D2C4;
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  background: #fff;
  color: #181A2E;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field:focus { outline: none; border-color: #4169E1; box-shadow: 0 0 0 3px rgba(65,105,225,0.15); }
.field::placeholder { color: #9CA39B; }

/* Nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: #D4AF37;
  transition: width 0.2s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Mobile nav */
#mobile-menu { transition: max-height 0.3s ease; }

/* Star rating */
.stars { color: #947B27; letter-spacing: 2px; }

/* Before/after slider labels */
.ba-label {
  position: absolute;
  top: 0.75rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 9999px;
  text-transform: uppercase;
}