/*
 * Self-hosted variable fonts.
 *
 * Converted from the brand package TTFs by wp/scripts/build-fonts.sh:
 *   Stack Sans Headline  122.6 KB TTF -> 50.0 KB WOFF2   (wght 200-700)
 *   Archivo              636.8 KB TTF -> 182.3 KB WOFF2  (wght 100-900, wdth 62-125)
 *
 * font-display: swap keeps the hero readable before the face lands; the comp is
 * text-led above the fold, so a blocking load would be the worse trade.
 */

@font-face {
  font-family: "Stack Sans Headline";
  src: url("../fonts/StackSansHeadline-Variable.woff2") format("woff2-variations"),
       url("../fonts/StackSansHeadline-Variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2-variations"),
       url("../fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
 * BRAND DEFAULTS — the only styling in this theme, and all of it on `body`.
 *
 * This is a dark-ground design. WordPress and Hello Elementor default to a
 * white page with dark text, so without these four lines every section has to
 * set its own background or it renders white — which is exactly what happened
 * when they were briefly removed: the hero and Prime E-Hookah sections looked
 * right because they set their own backgrounds, while the pillars and Who We
 * Are sections went white.
 *
 * Safe by construction: a bare `body` selector is the lowest specificity that
 * exists. Every Elementor setting — Global Kit, per-widget, or a V4 local
 * style — overrides it. These cannot fight anything set in the editor. They
 * only fill the gap where nothing has been set.
 *
 * Ground colour is #04090C, measured as the dominant colour of the delivered
 * comp (400k pixels). Text is Brushed Silver from the brand palette.
 *
 * Nothing beyond `body` belongs in this file. If a rule ever needs a class, a
 * descendant selector, or an !important, it belongs in the Elementor editor.
 * ------------------------------------------------------------------------- */
body {
  background-color: #04090c;
  color: #dee0e0;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Full-bleed decorative elements (the gradient bars, glow halos) overflow
   * their container on narrow viewports and would otherwise create a
   * horizontal scrollbar. */
  overflow-x: hidden;
}