:root {
  /* Core Colors - Luxury Editorial Palette */
  --bg-primary: #050608;
  --bg-secondary: #08090b;
  --bg-card: #0c0e11;
  --bg-panel: #101216;
  
  --text-primary: #f4efe5;
  --text-secondary: #b5af9f;
  --text-muted: #8c8270;
  
  --gold-primary: #d8b56a;
  --gold-strong: #efc46f;
  --gold-soft: #9c7c3d;
  --glow-gold: radial-gradient(circle at 50% 50%, rgba(216, 181, 106, 0.15), transparent 70%);
  --glow-atmos: radial-gradient(circle at 20% 30%, rgba(216, 181, 106, 0.08), transparent 50%);
  --glow-focus: radial-gradient(circle at center, rgba(216, 181, 106, 0.12) 0%, transparent 80%);
  --glow-legacy: radial-gradient(circle at 50% 100%, rgba(216, 181, 106, 0.1), transparent 60%);
  
  /* Borders & Dividers - Luxury Restraint */
  --border-soft: rgba(255, 255, 255, 0.03);
  --border-medium: rgba(255, 255, 255, 0.06);
  --line: var(--border-soft);
  --line-strong: rgba(255, 255, 255, 0.1);
  
  /* Spacing Scale - Intentional Rhythm */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem; /* Dramatic visual breathing */
  --section-gap: clamp(6rem, 15vw, 12rem);
  
  /* Geometry & Shadows */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px; /* Iconic cinematic radius */
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 40px 100px rgba(0, 0, 0, 0.7);
  
  /* Layout Metrics */
  --container-max: 1320px;
  --container-narrow: 760px; /* High-trust editorial reading width */
  --header-height: 88px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-primary);
  background-image: var(--glow-atmos), linear-gradient(180deg, #090a0c 0%, #050608 100%);
  color: var(--text-primary);
  font-family: Manrope, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.85;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 1s cubic-bezier(0.16, 1, 0.3, 1);
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.is-visible,
.no-js .reveal {
  opacity: 1;
  transform: translateY(0);
}

.reveal--slow {
  transition-duration: 2.5s;
}

.reveal--zoom {
  transform: scale(0.95) translateY(20px);
}

.reveal--zoom.is-visible {
  transform: scale(1) translateY(0);
}

/* Cinematic Portrait Focus - The WOW Experience */
.portrait-focus-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: var(--shadow-strong);
}

.portrait-focus-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1) grayscale(0.2);
  transition: transform 20s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease;
}

.portrait-focus-wrap:hover .portrait-focus-image {
  transform: scale(1.12);
  filter: brightness(0.9) contrast(1);
}

.portrait-focus-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 8, 0) 0%, rgba(5, 6, 8, 0.4) 50%, rgba(5, 6, 8, 0.9) 100%);
  z-index: 1;
  pointer-events: none;
}