/* Global guard: never allow accidental horizontal page-scroll on mobile.
   overflow-x:clip (not hidden) so position:sticky nav still works.
   Applied to html AND body so a wide child (tables, marquees) can't force scroll. */
html, body { overflow-x: clip; max-width: 100%; }
/*
 * BOOJEE ESTATE — Design System
 * boojee-system.css — v2.0 (2026-07-03)
 *
 * Single-source CSS variables + global utilities consumed by all
 * flagship pages. Include BEFORE page-specific <style> blocks.
 * Does NOT override existing page styles — only defines variables
 * and additive utility classes.
 */

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Background scale ── */
  --bg:            #050506;
  --bg-void:       #050506;
  --bg-1:          #0a090e;
  --bg-deep:       #0a0810;
  --bg-surface:    #0f0e14;
  --panel:         #0e0d12;
  --bg-raised:     #141218;

  /* ── Foreground / text scale ── */
  --fg-0:          #f8f7fc;
  --cream:         #f2ece0;
  --cream-dk:      #d9d0c2;
  --fg-2:          rgba(248,247,252,.55);
  --text-primary:  #f8f2e7;
  --text-body:     #d9d0c2;
  --text-muted:    #a9a095;
  --muted-lt:      #a9a095;
  --muted:         #908880; /* a11y: was #7a7068 (4.22:1 → 4.74:1 on #050506) */
  --text-dim:      #7d7769; /* a11y: was #6a6258 (3.40:1 → 4.57:1) */
  --text-ghost:    #777773; /* a11y: was #4a4640 (2.17:1 → 4.53:1) */

  /* ── Brand gold palette ── */
  --gold:          #c9a84c;
  --gold-bright:   #e8c97a;
  --gold-dark:     #a8854d;
  --gold-dim:      rgba(201,168,76,.32);
  --gold-glow:     rgba(201,168,76,.18);
  --accent:        #c9a84c;
  --accent-bright: #e8c97a;
  --accent-dim:    rgba(201,168,76,.32);
  --accent-glow:   rgba(201,168,76,.20);

  /* ── Border scale ── */
  --border:        rgba(255,255,255,.08);
  --border-mid:    rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.18);
  --border-gold:   rgba(201,168,76,.22);

  /* ── Layout ── */
  --max-width:     1060px;
  --nav-height:    62px;

  /* ── Type scale ── */
  --type-micro:    .625rem;    /* 10px — kickers, badges */
  --type-xs:       .75rem;     /* 12px — legal, captions */
  --type-sm:       .875rem;    /* 14px — secondary body */
  --type-base:     1rem;       /* 16px — primary body */
  --type-lg:       1.125rem;   /* 18px — large body */
  --type-xl:       1.375rem;   /* 22px — subheadings */

  /* ── Spacing scale ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ── Focus ring ── */
  --focus-ring:        0 0 0 3px rgba(201,168,76,.55);
  --focus-ring-offset: 0 0 0 2px var(--bg-void), 0 0 0 5px rgba(201,168,76,.55);

  /* ── Transition presets ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --t-fast:   150ms;
  --t-base:   220ms;
  --t-slow:   380ms;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL BASE (only when not already set)
═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS VISIBLE — accessibility
   Applied globally; overrides default browser outlines with
   the gold ring on keyboard navigation only.
═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Suppress ring on mouse click */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   NOISE FILM — subtle texture overlay (opt-in via .bje-noise class on body)
═══════════════════════════════════════════════════════════════ */
.bje-noise::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL — lightweight, no-JS-dep fade+lift
   Add class="bje-sr" to any element; JS below activates it.
═══════════════════════════════════════════════════════════════ */
.bje-sr {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.bje-sr.bje-sr--visible {
  opacity: 1;
  transform: translateY(0);
}
.bje-sr--delay-1 { transition-delay: 80ms; }
.bje-sr--delay-2 { transition-delay: 160ms; }
.bje-sr--delay-3 { transition-delay: 240ms; }
.bje-sr--delay-4 { transition-delay: 320ms; }
.bje-sr--delay-5 { transition-delay: 400ms; }

/* ═══════════════════════════════════════════════════════════════
   SECTION UTILITY — consistent section padding + inner wrapper
═══════════════════════════════════════════════════════════════ */
.bje-section {
  padding: var(--sp-20) var(--sp-6);
}
.bje-inner {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ── Eyebrow / kicker ── */
.bje-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: var(--sp-4);
}

/* ── Section heading ── */
.bje-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--cream);
  margin-bottom: var(--sp-3);
}
.bje-h2 em { font-style: italic; }

/* ── Section lede ── */
.bje-lede {
  font-size: var(--type-lg);
  font-weight: 300;
  color: var(--muted-lt);
  max-width: 580px;
  line-height: 1.7;
}

/* ── Gold separator rule ── */
.bje-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: var(--sp-6) 0;
}

/* ── Card base ── */
.bje-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  transition: border-color var(--t-base) ease;
}
.bje-card:hover {
  border-color: var(--border-mid);
}

/* ── Button: gold filled ── */
.bje-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--gold);
  color: #050506;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: opacity var(--t-base) ease, transform var(--t-fast) ease;
}
.bje-btn:hover  { opacity: .88; transform: translateY(-1px); }
.bje-btn:active { transform: translateY(0); }

/* ── Button: ghost ── */
.bje-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: none;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  padding: 13px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--t-base) ease, background var(--t-base) ease;
}
.bje-btn-ghost:hover {
  border-color: var(--gold);
  background: var(--gold-glow);
}

/* ── Badge / pill ── */
.bje-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(201,168,76,.12);
  color: var(--gold);
  border: 1px solid rgba(201,168,76,.25);
}

/* ── Gold gradient accent line (decorative) ── */
.bje-accent-line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold-dim) 70%, transparent);
  margin-bottom: var(--sp-16);
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL OBSERVER — inline script target
   Pages import this file, then call bjeInitReveal() or add the
   data-bje-sr attribute to trigger auto-observation.
═══════════════════════════════════════════════════════════════ */