/* ============================================================
   GXJ Events — base layer (reset, typography, layout, components)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text-white);
  background: var(--c-dark-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* contain horizontal overflow WITHOUT breaking position:sticky */
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; font-family: var(--font-display); } /* Aeroko Bold */
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Layout helpers ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-2xl); }
.section { position: relative; padding-block: var(--section-pad); }
.section--pad-x { padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Headings (rekolet scale) ---- */
.h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.h3 { font-family: var(--font-display); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.h4 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.h5 { font-family: var(--font-display); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); }
.h6 { font-family: var(--font-display); font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }

/* ---- Buttons / pills ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-m);
  padding: var(--sp-m) var(--sp-xl);
  border-radius: var(--r-sm); border: 0;
  font-weight: 700; line-height: 1.2;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--brown { background: var(--c-brown); color: var(--c-text-white); padding-left: var(--sp-2xl); }
.btn--light { background: var(--c-text-white); color: var(--c-black); }
.btn--ghost { background: transparent; border: 1px solid var(--c-line-light); }
.btn__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }

/* ---- Glass card ---- */
.glass { background: var(--glass-light); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); border-radius: var(--r-sm); }
.glass--strong { background: var(--glass-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--r-lg); }

/* ---- Generic card ---- */
.card { border-radius: var(--r-md); overflow: hidden; }

/* ---- Image placeholder (for figma image-fills not yet supplied) ---- */
.imgph {
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, #2a2620 0%, #1a1714 60%, #0e0c0a 100%);
}

/* ---- Scroll reveal ----
   Reveals are driven by GSAP (assets/js/app.js), which sets the hidden
   start-state inline. We intentionally do NOT force opacity:0 here:
   GSAP must read each element's true natural opacity (1) as the tween's
   end value, and when JS/GSAP is absent everything stays visible.
   The .is-in class is only used by the no-GSAP fallback. */
[data-reveal].is-in { opacity: 1; transform: none; }