/* ==========================================================================
   Kiwi v2 — Base layer
   Reset + base typography + layout primitives.
   ========================================================================== */

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

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "cv11" 1; }

img,
svg,
video {
  display: block;
  max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer; }

a {
  color: inherit;
  text-decoration: none; }

/* Emphasis is roman. <em>/<i>/<cite> default to italic in every browser, and a
   sheared sans at UI sizes reads as a rendering fault rather than as emphasis —
   the colour and face already set on each em rule carry the emphasis instead.
   Italics that DEPICT something (icing piped on a cake, an imitated masthead)
   set font-style on their own class, which outranks this. */
em, i, cite, dfn, var { font-style: normal; }

input,
textarea,
select {
  font: inherit;
  color: inherit; }

::selection {
  background: var(--mint);
  color: var(--ink); }

/* Mint focus ring as the brand signature.
   Tab through the page = Mint walks the UI like a heartbeat. */
:focus {
  outline: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--glow-mint);
  border-radius: var(--r-xs);
  transition: box-shadow var(--d-quick) var(--ease-glide); }

/* ==========================================================================
   Type primitives — opinionated, paired with tokens
   ========================================================================== */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  font-weight: var(--w-medium);
  font-feature-settings: "ss01" 1, "cv11" 1; }

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-medium); }

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--w-medium); }

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--w-medium); }

.t-h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: 1.30;
  letter-spacing: var(--ls-h3);
  font-weight: var(--w-medium); }

.t-lead {
  font-size: var(--t-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  font-weight: var(--w-regular);
  color: var(--n-600); }

.t-body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--w-regular); }

.t-small {
  font-size: var(--t-small);
  line-height: 1.50;
  font-weight: var(--w-regular); }

.t-meta {
  font-size: var(--t-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  font-weight: var(--w-medium);
  color: var(--n-500); }

.t-eyebrow {
  font-size: var(--t-eyebrow);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--w-medium);
  color: var(--n-500); }

/* Editorial accent — floating word with Atlas glow leaking from behind.
   Same typeface as the heading (Inter Tight). The "specialness" comes from light,
   not from font-swap, and never from italic. Atlas on light slabs, Mint on dark.

   The animated blur-blob that sat behind this word is gone: the hero already
   carries one atmospheric layer (.hero-mesh), and three stacked independently
   animated blobs behind one headline is the aurora-blob pattern. */
.ed {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  text-shadow:
    0 4px 16px rgba(11, 110, 79, 0.26),
    0 8px 32px rgba(11, 110, 79, 0.13); }


/* On dark slabs (Ink, Riad, pitch deck dark slides) — Mint primary for contrast */
.slab-ink .ed,
.slab-riad .ed,
.s-title .ed,
.cta-final .ed,
.iq-card .ed,
.app-cta .ed {
  text-shadow:
    0 4px 18px rgba(125, 242, 176, 0.32),
    0 12px 40px rgba(125, 242, 176, 0.16); }


/* The number primitive — the body face's tabular figures by default.
   Inherits font/weight/spacing from parent so headlines stay coherent.
   Inter Tight carries tnum + lnum, so numbers align like mono without the
   font-swap visual weirdness at display sizes. Use .mono for explicit mono. */
.num {
  font-family: inherit;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: inherit;
  letter-spacing: inherit; }

/* Explicit mono — for tables, kbd, code, time stamps, and small UI chips. */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.01em; }

/* Arabic typographic moment */
.ar {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
  line-height: 1.75;
  font-feature-settings: "kern" 1; }

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

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad); }

.wrap-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--wrap-pad); }

.wrap-text {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--wrap-pad); }

@media (max-width: 720px) {
  .wrap,
  .wrap-narrow,
  .wrap-text {
    padding: 0 var(--wrap-pad-mobile); }
}

/* Section rhythm — alternating Paper / Ink slabs */
section {
  padding: var(--s-24) 0;
  position: relative; }

section.tight   { padding: var(--s-16) 0; }
section.loose   { padding: var(--s-32) 0; }

.slab-paper {
  background: var(--paper);
  color: var(--ink); }

.slab-paper-soft {
  background: var(--paper-soft);
  color: var(--ink); }

.slab-ink {
  background: var(--ink);
  color: var(--paper); }

.slab-riad {
  background: var(--riad-deep);
  color: var(--paper); }

/* On dark surfaces (slabs OR dark cards), swap muted text */
.slab-ink :where(.t-lead, .t-meta),
.slab-riad :where(.t-lead, .t-meta),
.card-ink :where(.t-lead, .t-meta),
.card-riad :where(.t-lead, .t-meta),
.card-atlas :where(.t-lead, .t-meta) {
  color: rgba(247, 245, 240, 0.70); }

.slab-ink :where(.t-eyebrow),
.slab-riad :where(.t-eyebrow),
.card-ink :where(.t-eyebrow),
.card-riad :where(.t-eyebrow),
.card-atlas :where(.t-eyebrow) {
  color: rgba(247, 245, 240, 0.55); }

/* Stacks (vertical rhythm) */
.stack-1 > * + *  { margin-top: var(--s-1); }
.stack-2 > * + *  { margin-top: var(--s-2); }
.stack-3 > * + *  { margin-top: var(--s-3); }
.stack-4 > * + *  { margin-top: var(--s-4); }
.stack-6 > * + *  { margin-top: var(--s-6); }
.stack-8 > * + *  { margin-top: var(--s-8); }
.stack-10 > * + * { margin-top: var(--s-10); }
.stack-12 > * + * { margin-top: var(--s-12); }

/* ==========================================================================
   Utility — visually hidden but accessible
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }