/* ==========================================================================
   ABYAR AL-RUMAILA ENERGY — Foundations
   Tokens · Reset · Typography · Layout primitives · Utilities
   ========================================================================== */

:root {
  /* ---- Ground ---- */
  --ink-1000: #02090f;
  --ink-900:  #04101f;   /* page ground */
  --ink-850:  #061729;
  --ink-800:  #072441;   /* brand navy */
  --ink-700:  #0b3157;
  --ink-600:  #10426f;
  --line:     rgba(190, 214, 240, 0.14);
  --line-2:   rgba(190, 214, 240, 0.07);

  /* ---- Brand ---- */
  --blue-700: #06276a;
  --blue-600: #0e52ac;
  --blue-500: #1268b3;
  --blue-400: #3183da;
  --blue-300: #6aaef0;

  --green-700: #2c6a17;
  --green-600: #4ca22f;
  --green-500: #6fc23e;
  --green-400: #93d251;

  /* ---- Surface / text ---- */
  --paper:   #f2efe8;   /* inverted section ground */
  --paper-2: #e4dfd4;
  --sand:    #ece7dd;   /* primary text on dark */
  --sand-70: rgba(236, 231, 221, 0.78);  /* 8.8:1  */
  --sand-52: rgba(236, 231, 221, 0.62);  /* 6.4:1  */
  --sand-34: rgba(236, 231, 221, 0.52);  /* 4.8:1  */
  --sand-16: rgba(236, 231, 221, 0.16);

  --accent: var(--green-500);
  --accent-cool: var(--blue-400);

  /* ---- Type ---- */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-serif:   "Instrument Serif", "Times New Roman", serif;

  /* fluid scale — 390px → 1680px */
  --t-100: clamp(0.69rem, 0.66rem + 0.12vw, 0.78rem);
  --t-200: clamp(0.81rem, 0.78rem + 0.14vw, 0.92rem);
  --t-300: clamp(0.94rem, 0.90rem + 0.20vw, 1.09rem);
  --t-400: clamp(1.06rem, 0.99rem + 0.34vw, 1.35rem);
  --t-500: clamp(1.35rem, 1.18rem + 0.74vw, 1.95rem);
  --t-600: clamp(1.75rem, 1.38rem + 1.62vw, 3.05rem);
  --t-700: clamp(2.05rem, 1.30rem + 3.55vw, 4.85rem);
  --t-800: clamp(3.20rem, 1.72rem + 6.40vw, 7.60rem);
  --t-900: clamp(2.15rem, 0.55rem + 8.60vw, 9.50rem);

  /* ---- Space ---- */
  --pad-x: clamp(1.25rem, 4.2vw, 4.75rem);
  --gap:   clamp(1rem, 1.6vw, 1.75rem);
  --sec-y: clamp(6rem, 13vh, 12rem);
  --maxw:  1680px;

  /* ---- Motion ---- */
  --e-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --e-in:   cubic-bezier(0.70, 0, 0.84, 0);
  --e-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --d-fast: 0.36s;
  --d-mid:  0.72s;
  --d-slow: 1.15s;

  --radius: 2px;
  --nav-h: clamp(64px, 7vh, 88px);
  color-scheme: dark;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: none;
}
html::-webkit-scrollbar { width: 0; height: 0; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--sand);
  font-family: var(--f-body);
  font-size: var(--t-300);
  font-weight: 400;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; height: 100vh; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green-600); color: #041018; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--green-400);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 118, "wght" 800;
  text-transform: uppercase;
  line-height: 0.87;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.display--tight { font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: -0.034em; }
.display--wide  { font-variation-settings: "wdth" 125, "wght" 700; }

.h1 { font-size: var(--t-800); }
.h2 { font-size: var(--t-700); }
.h3 { font-size: var(--t-600); }
.h4 {
  font-family: var(--f-display);
  font-size: var(--t-500);
  font-weight: 700;
  font-variation-settings: "wdth" 108, "wght" 700;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-transform: uppercase;
}

.lead {
  font-size: var(--t-400);
  line-height: 1.42;
  color: var(--sand-70);
  letter-spacing: -0.012em;
  max-width: 60ch;
  text-wrap: pretty;
}

.body { color: var(--sand-52); max-width: 62ch; text-wrap: pretty; }
.body--tight { max-width: 46ch; }

.serif {
  font-family: var(--f-serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  line-height: 1.06;
}

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-100);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Section eyebrow: dot + label */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--f-mono);
  font-size: var(--t-100);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-500);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  flex: none;
}
.eyebrow__num { color: var(--sand-34); }
.eyebrow--cool { color: var(--blue-300); }

.rule { height: 1px; background: var(--line); border: 0; width: 100%; }

/* ==========================================================================
   Layout
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  position: relative;
  padding-block: var(--sec-y);
}
.section--flush { padding-block: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 860px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.col-full { grid-column: 1 / -1; }

/* Inverted (light) sections */
.invert {
  background: var(--paper);
  color: var(--ink-800);
}
.invert .body { color: rgba(7, 36, 65, 0.72); }
.invert .lead { color: rgba(7, 36, 65, 0.84); }
.invert .eyebrow { color: var(--green-700); }
.invert .eyebrow__num { color: rgba(7, 36, 65, 0.62); }
.invert .rule { background: rgba(7, 36, 65, 0.14); }
.invert ::selection { background: var(--ink-800); color: var(--paper); }

/* ==========================================================================
   Media primitives
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  background: var(--ink-850);
}
.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media--fill { position: absolute; inset: 0; }

/* Cinematic tint so mixed footage reads as one brand system */
.tint::after,
.tint--soft::after,
.tint--deep::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tint::after {
  background:
    linear-gradient(180deg, rgba(4,16,31,.34) 0%, rgba(4,16,31,0) 32%, rgba(4,16,31,.16) 62%, rgba(4,16,31,.80) 100%),
    linear-gradient(104deg, rgba(6,39,106,.42) 0%, rgba(4,16,31,.10) 46%, rgba(44,106,23,.22) 100%);
}
.tint--soft::after {
  background: linear-gradient(180deg, rgba(4,16,31,.20), rgba(4,16,31,.62));
}
.tint--deep::after {
  background:
    linear-gradient(180deg, rgba(4,16,31,.55), rgba(4,16,31,.30) 40%, rgba(4,16,31,.92)),
    linear-gradient(90deg, rgba(6,39,106,.40), rgba(4,16,31,0) 60%);
}

/* Film grain — disabled. To re-enable: restore <div class="grain"> in
   index.html and set --grain-src to url("../../assets/img/grain.png").
   Keep opacity well under 0.10; at 0.30 it read as dirt on the screen. */
.grain {
  position: fixed;
  inset: -120px;
  z-index: 60;
  pointer-events: none;
  opacity: 0.30;
  mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 220px 220px;
  will-change: transform;
}

/* Vignette veil */
.veil {
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(120% 88% at 50% 42%, transparent 42%, rgba(2,9,15,.55) 100%);
}

/* ==========================================================================
   Reveal primitives (JS adds transforms; CSS below is the no-JS fallback)
   ========================================================================== */

.line-mask { display: block; overflow: hidden; }
.split-line { display: block; overflow: hidden; }
.split-line > span { display: block; will-change: transform; }

[data-reveal] { will-change: transform, opacity; }

.no-js [data-reveal],
.no-js .split-line > span { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   Utilities
   ========================================================================== */

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.u-cap { text-transform: uppercase; }
.u-nowrap { white-space: nowrap; }
.u-accent { color: var(--green-500); }
.u-cool { color: var(--blue-300); }
.u-dim { color: var(--sand-34); }
.u-right { text-align: right; }
.u-relative { position: relative; }
.u-stack { display: flex; flex-direction: column; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .grain { display: none; }
}

/* ---- Lenis smooth-scroll requirements ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Inline brand mark used in the nav */
.mark-mono { display: block; width: clamp(26px, 2.4vw, 34px); flex: none; }
.mark-mono svg { width: 100%; height: auto; display: block; }

/* ---- SplitText output ---- */
.split-char, .split-word { display: inline-block; will-change: transform; }
.split-line { padding-bottom: 0.06em; }
.hero__title .split-line { padding-bottom: 0.10em; }
.manifesto__copy .split-word { will-change: color; }