/* ============================================================
   UPPER VIBRATION — Brand Foundation
   Palette: aubergine + warm gold + cream
   Type:    Cinzel (display) · EB Garamond (accent) · DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* palette */
  --uv-black:       #100A16;
  --uv-darker:      #1C1626;
  --uv-dark:        #2E2438;
  --uv-gold:        #B8893A;
  --uv-gold-light:  #E8C26A;
  --uv-gold-deep:   #8A6326;
  --uv-cream:       #FBF6EE;
  --uv-text:        #F3ECDF;
  --uv-text-soft:   #D4B896;
  --uv-text-mute:   #8F8398;
  --uv-ink:         #221A2B;
  --uv-line:        rgba(184,137,58,0.28);
  --uv-line-soft:   rgba(243,236,223,0.12);

  /* element tints */
  --el-earth:  #cdb06a;
  --el-water:  #6fc6d4;
  --el-fire:   #f2a23c;
  --el-air:    #f3e7c8;
  --el-ether:  #c9a8e6;

  /* gradients */
  --uv-glow-gold: radial-gradient(ellipse at center, rgba(184,137,58,0.2), transparent 70%);

  /* type */
  --uv-display: 'Cinzel', serif;
  --uv-accent:  'EB Garamond', serif;
  --uv-body:    'DM Sans', system-ui, sans-serif;

  /* motion */
  --uv-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --uv-ease2: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--uv-body);
  background: var(--uv-black);
  color: var(--uv-text);
  font-weight: 300;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--uv-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: rgba(184,137,58,0.35); color: var(--uv-cream); }

/* ── SCROLL REVEAL ── */
[data-reveal] { opacity: 1; }
html.uv-armed [data-reveal]:not(.is-in) { transform: translateY(26px); opacity: 0; }
[data-reveal].is-in { animation: uvReveal 0.72s var(--uv-ease2) both; }
@keyframes uvReveal {
  from { transform: translateY(26px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
[data-reveal-delay="1"].is-in { animation-delay: 0.08s; }
[data-reveal-delay="2"].is-in { animation-delay: 0.16s; }
[data-reveal-delay="3"].is-in { animation-delay: 0.24s; }
[data-reveal-delay="4"].is-in { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.uv-armed [data-reveal]:not(.is-in) { transform: none; opacity: 1; }
  [data-reveal].is-in { animation: none; }
}

/* ── SHARED ATOMS ── */

.uv-eyebrow {
  font-family: var(--uv-display);
  font-size: clamp(9px, 0.9vw, 11px);
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--uv-gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.uv-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--uv-gold), transparent);
  opacity: 0.4;
  margin: clamp(40px,5vw,64px) 0;
}

/* buttons */
.uv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-family: var(--uv-display);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--uv-black);
  background: var(--uv-gold);
  padding: 1.1em 2em;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: background 0.35s var(--uv-ease), transform 0.35s var(--uv-ease), box-shadow 0.35s var(--uv-ease);
  box-shadow: 0 8px 28px -10px rgba(184,137,58,0.65);
  white-space: nowrap;
}
.uv-btn:hover { background: var(--uv-gold-light); transform: translateY(-2px); box-shadow: 0 14px 36px -10px rgba(184,137,58,0.8); }
.uv-btn .arr { display: inline-block; transition: transform 0.35s var(--uv-ease); }
.uv-btn:hover .arr { transform: translateX(4px); }

.uv-btn--ghost {
  background: transparent;
  color: var(--uv-gold-light);
  border: 1px solid rgba(184,137,58,0.55);
  box-shadow: none;
}
.uv-btn--ghost:hover { background: rgba(184,137,58,0.1); color: var(--uv-cream); box-shadow: none; }

.uv-btn--dark {
  background: var(--uv-darker);
  color: var(--uv-cream);
  box-shadow: 0 8px 28px -10px rgba(0,0,0,0.5);
}
.uv-btn--dark:hover { background: var(--uv-dark); }

/* photo placeholder */
.uv-photo {
  position: relative;
  background:
    var(--uv-glow-gold),
    repeating-linear-gradient(135deg, rgba(184,137,58,0.04) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #241B2E 0%, #160F1F 55%, #0D0814 100%);
  overflow: hidden;
}
.uv-photo::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--uv-display);
  font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(212,184,150,0.45); text-align: center; width: 76%; line-height: 2;
}

/* ── SHARED NAV (subpages) ── */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px,2vw,24px) clamp(24px,5vw,64px);
  background: rgba(16,10,22,0); backdrop-filter: blur(0);
  transition: background 0.5s var(--uv-ease), backdrop-filter 0.5s var(--uv-ease);
}
.site-nav.solid { background: rgba(16,10,22,0.72); backdrop-filter: blur(14px); }
.site-nav .brand {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--uv-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.28em; color: var(--uv-cream);
  cursor: pointer;
}
.site-nav .nav-links {
  display: flex; align-items: center; gap: clamp(22px,3vw,40px);
  font-family: var(--uv-display); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.site-nav .nav-links a { transition: color 0.3s; }
.site-nav .nav-links a:hover { color: #fff; }
@media (max-width: 640px) { .site-nav .nav-links { display: none; } }

/* ── SHARED FOOTER ── */
.site-foot {
  position: relative; z-index: 2;
  background: #07050f;
  border-top: 1px solid rgba(201,168,230,0.18);
  padding: clamp(46px,6vw,72px) clamp(24px,6vw,80px) 32px;
}
.site-foot .foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px; max-width: 1200px; margin: 0 auto;
}
@media (max-width: 760px) { .site-foot .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.site-foot h4 {
  font-family: var(--uv-display); font-size: 10px;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--uv-gold); margin-bottom: 14px;
}
.site-foot a, .site-foot p { display: block; color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 8px; transition: color 0.3s; }
.site-foot a:hover { color: #fff; }
.site-foot .foot-brand {
  font-family: var(--uv-display); font-weight: 700;
  font-size: 18px; letter-spacing: 0.22em; color: var(--uv-cream); margin-bottom: 10px;
}
.site-foot .fine {
  max-width: 1200px; margin: clamp(32px,4vw,48px) auto 0;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.site-foot .fine span { font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); }