/* ============================================================
   THE CAYEN COLLECTION — SHARED DESIGN SYSTEM
   Single source of truth for tokens, navigation, cursor system,
   accessibility layer, and atmospheric foundations.
   Page-specific layouts remain inline on each page.

   Source order: this file MUST load BEFORE the inline <style>
   block on each page so per-page rules can override the
   shared defaults.
   ============================================================ */


/* ── 0. RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ── 1. DESIGN TOKENS ───────────────────────────────────── */
:root {
  --cream:        #F5F0E8;
  --gold:         #B8965A;
  --gold-light:   #D4AF74;
  --gold-deep:    #9A7A3F;       /* for parchment backgrounds only */
  --charcoal:     #1C1916;
  --charcoal-2:   #141210;
  --ink:          #2E2A24;
  --stone:        #7A7468;
  --warm-white:   #FAF8F4;
  --parchment:    #EDE7D9;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui:      'Jost', sans-serif;
}


/* ── 2. BASE ────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--parchment);
  overflow-x: hidden;
}

/* Dark-mode pages opt in via <body class="dark-mode">.
   Use this for the homepage, Cayen Privé, and any future
   page whose entire content surface is dark. */
body.dark-mode { background: var(--charcoal-2); }

img { max-width: 100%; height: auto; }
img:not([src]), img[src=""] { display: none; }


/* ── 3. ACCESSIBILITY LAYER ─────────────────────────────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--charcoal);
  border: 1px solid rgba(184,150,90,0.3);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus { top: 16px; }

*:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
*:focus:not(:focus-visible) { outline: none; }


/* ── 4. CURSOR (DESKTOP ONLY) ───────────────────────────── */
/* The custom cursor is decorative; it should supplement the
   native cursor on devices that have a real pointer, and step
   aside on touch-only devices where there is no mouse.

   The cursor itself is created in JavaScript on each page
   (white dot/ring with mix-blend-mode: difference) so it
   inverts whatever it sits on. The CSS here only controls
   when the cursor is visible. */
@media (hover: hover) {
  html, body { cursor: none; }
  a, button, [data-hover] { cursor: none; }
}

#cursor, #cursorRing {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: left, top;
  z-index: 9999;
}

@media (hover: none) {
  #cursor, #cursorRing { display: none; }
}


/* ── 5. FILM GRAIN OVERLAY ──────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 8000;
  opacity: 0.03;
  mix-blend-mode: overlay;
  animation: grainDrift 10s steps(3) infinite;
}

@keyframes grainDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  33%  { transform: translate(-2%,1%) rotate(0.5deg); }
  66%  { transform: translate(1%,-2%) rotate(-0.5deg); }
  100% { transform: translate(-1%,2%) rotate(0deg); }
}


/* ── 6. INQUIRY-FLOAT (the floating C) ──────────────────── */
/* Visual styling for the floating inquiry C button. The HTML
   element itself is added per-page where appropriate.
   Suppressed on Cayen Privé via the .no-inquiry-float class
   on body (see Privé page). */
.inquiry-float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 9997;
  width: 58px; height: auto;
  display: block;
  opacity: 0.82;
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}
.inquiry-float:hover { opacity: 1; transform: scale(1.1); }
.inquiry-float img {
  width: 100%; height: auto; display: block;
  filter: none;
}

body.no-inquiry-float .inquiry-float { display: none; }

@media (max-width: 768px) {
  .inquiry-float { width: 46px; bottom: 20px; right: 20px; }
}


/* ── 7. REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::after { animation: none !important; }
}


/* ── 8. PRINT ───────────────────────────────────────────── */
@media print {
  .nav, nav#mainNav, .nav-mobile, .hero-scroll, .marquee,
  #cursor, #cursorRing,
  .inquiry-float, .skip-to-content {
    display: none !important;
  }
  body { background: white !important; color: black !important; }
  body::after { display: none !important; }
}


/* ── 9. DESIGNER HERO — ATMOSPHERIC LAYER (K2) ──────────── */
/* Glide gradient: lateral luminosity sweep applied over the
   hero background image. Warm gold bloom from the upper-left;
   deepening shadow toward the lower-right. Enriches the image
   and preserves atmosphere when the image is still loading.
   Applied to all designer hero pages via .dh-bg sibling. */
.dh-glide {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 65% at 18% 28%, rgba(212,175,116,.09) 0%, transparent 58%),
    radial-gradient(ellipse 55% 55% at 82% 72%, rgba(8,5,2,.18) 0%, transparent 52%);
}

/* Ornamental rule: horizontal gold rule with center diamond.
   Propagated from the Journal hero pattern. Placed between
   .dh-eyebrow and .dh-title on all designer pages. */
.dh-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.dh-rule::before,
.dh-rule::after {
  content: '';
  width: 36px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(184,150,90,.42), transparent);
  flex-shrink: 0;
}
.dh-diamond {
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: .85;
}
