/* ==========================================================================
   Greenman's Gate — shared styles (loaded on every page)
   Page-specific styles live in each page's own <style> block.
   ========================================================================== */

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

:root {
  --gold: #e0b863;
  --gold-glow: rgba(224,184,99,.4);
  --obsidian: #090c1c;
  --purple: #582377;
}

html { scroll-behavior: smooth; scrollbar-color: #582377 #090c1c; scrollbar-width: thin; }
body {
  width: 100%;
  overflow-x: hidden;
  background: var(--obsidian);
  color: #cdd2ea;
  font-family: 'Raleway', sans-serif;
}

/* Custom scrollbar — dark purple */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #090c1c; }
::-webkit-scrollbar-thumb { background: #582377; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6f2d96; }

/* ── NAV ── */
#site-nav {
  background: rgba(9,12,28,.95);
  backdrop-filter: blur(8px);
  transition: background .4s ease, box-shadow .4s ease;
  border-bottom: 1px solid rgba(224,184,99,.10);
}
#site-nav.scrolled { box-shadow: 0 1px 0 rgba(224,184,99,.15); background: rgba(9,12,28,.98); }
.nav-link {
  font-family: 'Cinzel', serif;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: #8d92b6; text-decoration: none;
  transition: color .2s;
}
.nav-link:hover { color: var(--gold); }
.nav-link.active { color: var(--gold); }
.nav-link.active::after {
  content: ''; display: block; height: 1px; margin-top: 3px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

@keyframes flicker {
  0%,100% { text-shadow: 0 0 10px rgba(224,184,99,.35); }
  50%     { text-shadow: 0 0 22px rgba(224,184,99,.65), 0 0 5px rgba(224,184,99,.3); }
}
.logo-flicker { animation: flicker 5s ease-in-out infinite; }

#mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(9,12,28,.98);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem;
}
#mobile-menu.open { display: flex; }

/* ── NOISE GRAIN ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 60;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; opacity: .5;
}

/* ── INTERIOR PAGE HERO ── */
.page-hero { position: relative; padding: 9rem 1.5rem 4rem; text-align: center; overflow: hidden; background: linear-gradient(180deg, #0b0e20 0%, #090c1c 100%); }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(88,35,119,.28) 0%, transparent 65%); pointer-events: none; }
.page-hero-inner { position: relative; z-index: 1; max-width: 50rem; margin: 0 auto; }

/* ── CONTENT HELPERS ── */
.gold-rule {
  width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: .9rem auto;
}
.section-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: .65rem; letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold);
}
.ornament-divider {
  display: flex; align-items: center; gap: 1rem;
  color: var(--gold);
  font-size: .65rem; letter-spacing: .3em; font-family: 'Cinzel', serif;
}
.ornament-divider::before,
.ornament-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.btn-gold {
  display: inline-block; font-family: 'Cinzel', serif;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: #090c1c;
  background: linear-gradient(135deg, #c89a4d 0%, #f1dca2 45%, #c89a4d 100%);
  padding: .85rem 2.25rem; border: 1px solid #f1dca2;
  position: relative; overflow: hidden; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: box-shadow .35s ease, transform .2s ease;
}
.btn-gold::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .55s ease;
}
.btn-gold:hover::before { transform: translateX(110%); }
.btn-gold:hover { box-shadow: 0 0 28px var(--gold-glow), 0 0 8px var(--gold-glow); transform: translateY(-1px); }

.btn-ghost {
  display: inline-block; font-family: 'Cinzel', serif;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: #cdd2ea; background: transparent;
  padding: .85rem 2.25rem; border: 1px solid rgba(205,210,235,.4);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .3s, color .3s, box-shadow .3s, transform .2s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); box-shadow: inset 0 0 18px rgba(224,184,99,.07); transform: translateY(-1px); }

.text-gold-gradient {
  background: linear-gradient(135deg, #c89a4d, #f1dca2 50%, #c89a4d);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.reveal { opacity: 0; transform: translateY(32px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }