/* ============================================================
   VR Hire South Africa - "Gala Night" design tokens
   Palette sampled from the approved logomark family
   (dominant navy #101526 · gold #D4A45E · champagne #F5E699 · copper #9B6747)
   ============================================================ */

:root {
  /* ---- Canvas: midnight navy → plum ---- */
  --navy-950: #070B18;   /* deepest base (page bg) */
  --navy-900: #0B1124;   /* section canvas */
  --navy-870: #0E142D;   /* raised canvas */
  --navy-850: #121A38;   /* panels / cards */
  --navy-800: #182148;   /* hover panels */
  --navy-700: #22305E;   /* hairline-strong, chips */
  --plum-900: #150E2A;   /* plum end of gradient meshes */
  --plum-700: #2A1B48;
  --plum-500: #4A2A70;   /* accent glow only */

  /* ---- Gold family ---- */
  --gold-200: #FAF0CB;   /* palest champagne */
  --gold-300: #F5E699;   /* sampled highlight (logo flare) */
  --gold-400: #EAC97F;   /* bright gold */
  --gold-500: #D4A45E;   /* sampled primary gold */
  --gold-600: #BA8549;   /* deep gold, borders */
  --gold-700: #9B6747;   /* sampled copper, shadows */

  /* ---- Ink (text) ---- */
  --ink-hi:   #F4EFE1;   /* warm ivory headlines */
  --ink-body: #C7CCDE;   /* body copy */
  --ink-mute: #8E97B8;   /* captions, meta */
  --ink-on-gold: #171129; /* text on gold surfaces */

  /* ---- Lines, glass, washes ---- */
  --line-gold:      rgba(212, 164, 94, .22);
  --line-gold-soft: rgba(212, 164, 94, .12);
  --line-cool:      rgba(142, 151, 184, .18);
  --glass:          rgba(18, 26, 56, .72);
  --wash-gold:      rgba(212, 164, 94, .10);
  --wash-plum:      rgba(74, 42, 112, .22);

  /* ---- Type ---- */
  --font-display: "Fraunces", "Playfair Display", "Times New Roman", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --fs-hero:   clamp(2.45rem, 1.35rem + 4.6vw, 4.35rem);
  --fs-h1:     clamp(2rem, 1.3rem + 3vw, 3.3rem);
  --fs-h2:     clamp(1.65rem, 1.15rem + 2vw, 2.6rem);
  --fs-h3:     clamp(1.15rem, 1rem + .7vw, 1.45rem);
  --fs-body:   clamp(1rem, .95rem + .3vw, 1.11rem);
  --fs-small:  .9rem;
  --fs-micro:  .78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.65;

  --track-caps: .22em;     /* letterspaced eyebrows */
  --track-tight: -.015em;  /* display tightening */

  /* ---- Space ---- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.5rem; --sp-6: 2rem;
  --sp-7: 3rem;    --sp-8: 4rem;   --sp-9: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 34rem;        /* comfortable reading width */
  --maxw: 74rem;

  /* ---- Shape ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-arch: 999px 999px var(--r-lg) var(--r-lg);  /* gala arch frames */

  /* ---- Elevation ---- */
  --shadow-1:     0 24px 60px -28px rgba(2, 4, 12, .85);
  --shadow-2:     0 34px 90px -30px rgba(2, 4, 12, .92);
  --shadow-gold:  0 14px 44px -14px rgba(212, 164, 94, .48);
  --ring-photo:   0 0 0 1px var(--line-gold), 0 0 0 8px var(--line-gold-soft);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .44, 1);
  --dur-1: .28s;
  --dur-2: .6s;
  --dur-3: 1s;

  /* ---- Components ---- */
  --btn-gold-bg: linear-gradient(140deg, var(--gold-300) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
  --panel-bg: linear-gradient(165deg, var(--navy-850) 0%, var(--navy-870) 100%);
}

/* Reduced motion: collapse animation globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   Circular artwork frame - "polished brass ring"
   One reusable treatment for every artwork slot (the four
   .xp-scene experience tiles). Physical read: a medallion - 
   champagne hairline on the artwork edge, a dark bezel gap,
   then the gold ring, sitting on the card with a warm cast
   shadow. Echoes --ring-photo / .since medallion language;
   no glow, gold stays in the 10% accent layer and never
   competes with the gold CTA (the CTA fills, the ring lines).

   CSS only: no animation, no JS dependency. .art-frame.art-frame
   is doubled on purpose - it out-ranks the single-class
   .xp-scene rule in the page stylesheet (tokens.css loads
   first), so the medallion keeps its shape on the real artwork.
   The artwork swap landed 2026-10-21: the four "ARTWORK PENDING"
   pills and their inset rule are gone; `.art-frame > img` now
   frames the artwork directly.
   ============================================================ */
.art-frame.art-frame {
  border-radius: 50%;
  overflow: hidden;
  width: clamp(150px, 70%, 190px);  /* disc, not banner - keeps ≥25% air in the card */
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border: 1px solid rgba(245, 230, 153, .3);
  box-shadow:
    0 0 0 1px var(--line-gold),
    0 0 0 5px var(--navy-950),      /* dark bezel gap */
    0 0 0 6px var(--gold-500),      /* the brass ring */
    0 0 0 7px var(--line-gold-soft),
    0 18px 36px -14px rgba(212, 164, 94, .42);  /* warm cast, not glow */
}
.art-frame.art-frame > img {        /* the artwork swap landed - image fills the disc */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}