/* ============================================================
   VR TEAM BUILDING - design tokens ("bright arena")
   Mockup only. Anchored to the approved logomark colours:
   blue #1D6AE5 / orange #F97316. Lime is a sparing spark.
   ============================================================ */

:root {
  /* -- canvas & surfaces ------------------------------------ */
  --bg:          #F6F8FC;   /* bright cool canvas */
  --surface:     #FFFFFF;
  --bg-tint:     #EAF1FD;   /* blue-tinted band */
  --bg-cream:    #FFF7EF;   /* faint orange wash for warm cards */

  /* -- ink ---------------------------------------------------- */
  --ink:         #0C1A33;   /* deep navy, never pure black */
  --ink-soft:    #44536F;
  --ink-faint:   #7C89A6;
  --line:        #DCE5F4;

  /* -- brand -------------------------------------------------- */
  --blue:        #1D6AE5;   /* from knot.svg */
  --blue-deep:   #0E3FA0;
  --blue-ink:    #0B2B66;
  --orange:      #F97316;   /* from knot.svg */
  --orange-deep: #DD5F00;
  --lime:        #A3E635;   /* spark - accents only */
  --lime-ink:    #4A7A00;

  /* -- dark band ---------------------------------------------- */
  --navy:        #0C1A33;
  --navy-2:      #122347;

  /* -- type --------------------------------------------------- */
  --font-display: "Baloo 2", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* -- shape -------------------------------------------------- */
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   26px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* -- elevation ---------------------------------------------- */
  --shadow-card: 0 10px 30px -14px rgba(13, 42, 99, 0.22);
  --shadow-pop:  0 22px 48px -18px rgba(29, 106, 229, 0.38);
  --shadow-warm: 0 18px 40px -16px rgba(249, 115, 22, 0.40);

  /* -- layout -------------------------------------------------- */
  --wrap: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
}

/* ============================================================
   Circular artwork frame - "arena porthole"
   One reusable treatment for artwork slots (featured
   experience media today; any future experience-tile image).
   Physical read: a die-cut sticker mounted on the panel - 
   white bezel, then a crisp arena-blue ring. Geometry only:
   no glow, no gradients, flat lift shadow. The ring is blue
   on purpose: the CTA owns orange, and the 10% accent budget
   stays honest if the ring doesn't fight it.

   CSS only: no animation, no JS dependency. .art-frame.art-frame
   is doubled on purpose - it out-ranks the single-class img
   rules in the page stylesheet (tokens.css loads first), so
   the disc keeps its shape no matter which artwork file
   lands in the slot.
   ============================================================ */
.art-frame.art-frame > img {
  position: absolute;
  inset: 0;
  margin: auto;
  height: min(82%, 320px);     /* disc floats in the panel - ≥25% air kept */
  width: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 45% 30%;    /* keeps the featured subject centred in the round crop */
  border-radius: 50%;
  background: var(--bg-tint);
  border: 3px solid var(--surface);            /* white bezel */
  box-shadow:
    0 0 0 3px var(--blue),                     /* the crisp blue ring */
    0 18px 38px -16px rgba(13, 42, 99, .55);   /* flat lift - no glow */
}
/* the featured-photo side-wash existed to melt a rectangular
   photo into the blue panel; against a crisp disc it reads as
   a smudge - the bezel + ring carry the blend now */
.featured-photo.art-frame::after { display: none; }