/* Antkind design tokens. Copied verbatim from the design system at
   project/_ds/antkind-design-system-.../colors_and_type.css, with one change:
   the Typekit @import is lifted into a <link> in index.html so the font
   request is not serialised behind this stylesheet. Do not edit by hand;
   re-copy from the design system if the brand tokens change. */
/* ============================================================
   ANTKIND — Colors & Type
   Foundational design tokens for the Antkind Collective brand.
   Extracted from the antkind.in Webflow build + brand artifacts.
   BRAND fonts (Adobe Fonts): Elza (headline) · Neue Haas Grotesk Display (body)
   · Adelle Mono (accent). The Adobe kit is imported at the top of this file:
   kit `qoi5woj` (the kit authorised for futuretense.antkind.in;
   the design system's own kit is `skk5slp`) — ships **Elza** (weights 400/700, roman+italic;
   no black weight, so heavy display is synthesized). Neue Haas + Adelle Mono are
   NOT in this kit yet, so body falls back to the Helvetica stack and the accent
   to Roboto Mono. Add those two families to the same Adobe web project and they
   activate automatically. Free fallbacks also load from Google in each file:
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
   ============================================================ */

:root {

  /* ─────────────────────────────────────────────
     1. COLOR — PRIMITIVES
     Constant foundation: cream + warm near-black.
     Accents flat & declarative — no tints / shade ramps.
     ───────────────────────────────────────────── */
  --ak-red:        #ff6350;   /* accent — slabs, squiggles, CTAs */
  --ak-blue:       #6abfee;   /* accent — links, info, the ≤ wit */
  --ak-amber:      #ffb700;   /* accent — warm highlight, emphasis */
  --ak-green:      #83a967;   /* accent — organic, sustainability */
  --ak-pink:       #ff7bd5;   /* accent — playful pop, energy */
  --ak-brown:      #624b37;   /* accent — grounded, earthy, warm neutral */
  --ak-cream:      #fcfceb;   /* paper / light foreground (verified exact) */
  --ak-grey:       #b3b5b6;   /* muted text, captions */
  --ak-ink:        #191816;   /* warm near-black — the canvas (verified exact) */
  --ak-black:      #0a0a0a;   /* true black, rare */

  /* ─────────────────────────────────────────────
     2. COLOR — SEMANTIC (default = dark scheme,
     the brand's native mode)
     ───────────────────────────────────────────── */
  --bg:            var(--ak-ink);
  --bg-elevated:   #211f1d;
  --fg:            var(--ak-cream);
  --fg-muted:      rgba(252, 252, 235, 0.62);
  --fg-faint:      rgba(252, 252, 235, 0.40);
  --accent:        var(--ak-red);    /* LEAD — slabs, CTAs, squiggles, end-marks */
  --accent-2:      var(--ak-blue);   /* LEAD — links, info, the ≤ wit */
  --accent-warm:   var(--ak-amber);  /* SECONDARY — warm highlight, emphasis */
  --accent-organic:var(--ak-green);  /* SECONDARY — organic, sustainability */
  --accent-pop:    var(--ak-pink);   /* SECONDARY — playful pop, energy */
  --accent-earth:  var(--ak-brown);  /* SECONDARY — grounded, earthy neutral */
  --rule:          rgba(252, 252, 235, 0.14);   /* hairline on dark */
  --rule-strong:   rgba(252, 252, 235, 0.30);

  /* Light scheme — invert for paper surfaces (editorial, cards) */
  --bg-light:      var(--ak-cream);
  --fg-light:      var(--ak-ink);
  --fg-light-muted:rgba(25, 24, 22, 0.60);
  --rule-light:    rgba(25, 24, 22, 0.16);
  --rule-light-strong: rgba(25, 24, 22, 0.30);

  /* ─────────────────────────────────────────────
     2b. PALETTE TRIADS — THE RULE OF THREE
     A composition uses AT MOST THREE colours at once
     (neutrals included). Colours mix freely across the
     brand, but any single poster / slide / section / card
     commits to one triad: a FIELD (background) + a TYPE
     colour (usually a neutral) + ONE accent for graphics.
     Make as many palettes as you like — never break three.
     Verified triads (from the "Making Climate Pop" board):
       ink    + cream + red       brown + cream + blue
       green  + ink   + amber     blue  + cream + amber
       amber  + ink   + blue      pink  + ink   + brown
       red    + ink   + amber     cream + ink   + blue
     ───────────────────────────────────────────── */

  /* ─────────────────────────────────────────────
     3. TYPE — FAMILIES
     Three voices: a geometric grotesque (display +
     headings), a neutral grotesque (body), and a
     mono (labels, nav, captions). A serif is reserved
     for long-form editorial / zine deliverables.
     ───────────────────────────────────────────── */
  /* Headline — BRAND: Elza (Adobe Fonts). Fallback: Archivo. */
  --font-display:  'elza', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Body — BRAND: Neue Haas Grotesk Display (Adobe Fonts). Fallback: native Helvetica. */
  --font-body:     'neue-haas-grotesk-display', 'Helvetica Neue', Helvetica, 'Archivo', Arial, sans-serif;
  /* Accent / mono — BRAND: Adelle Mono (Adobe Fonts). Fallback: Roboto Mono. */
  --font-mono:     'adelle-mono', 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Editorial serif — Vārta / NGCPR zine deliverables (fallback face). */
  --font-serif:    'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* ─────────────────────────────────────────────
     4. TYPE — WEIGHTS & TRACKING
     ───────────────────────────────────────────── */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;          /* the big homepage display weight */

  --track-display: -0.04em;  /* tight on the huge grotesque */
  --track-head:    -0.02em;
  --track-mono:    0.14em;   /* generous on uppercase mono labels */

  /* ─────────────────────────────────────────────
     5. SPACING SCALE  (Webflow "space-*" tokens)
     ───────────────────────────────────────────── */
  --space-tiny:    4px;
  --space-xxs:     8px;
  --space-xs:      12px;
  --space-sm:      16px;
  --space-md:      24px;
  --space-lg:      32px;
  --space-xl:      48px;
  --space-xxl:     64px;
  --space-huge:    80px;
  --space-xhuge:   104px;
  --space-xxhuge:  128px;

  /* ─────────────────────────────────────────────
     6. SHAPE — RADII & STROKES
     Sharp by default. The only curves are capsules
     (buttons) and circles (avatars / dots).
     ───────────────────────────────────────────── */
  --radius-sharp:   0px;
  --radius-capsule: 999px;
  --radius-circle:  50%;
  --border-width:   1px;
  --divider-width:  1px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these directly, or copy the rules into your own selectors.
   Scale is built for the dark, editorial-poster voice of the brand.
   ============================================================ */

/* Oversized homepage / poster display — the "WE ≤ SEE A FUTURE" voice.
   Heavy grotesque, uppercase, very tight, near-zero leading. */
.ak-display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: clamp(64px, 12vw, 160px);
  line-height: 0.88;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.ak-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: var(--track-head);
}
.ak-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.02;
  letter-spacing: var(--track-head);
}
.ak-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.ak-h4 {
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* Editorial serif headline — Vārta / NGCPR zine voice */
.ak-serif {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.ak-serif-italic { font-style: italic; }

/* Body */
.ak-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  max-width: 62ch;
}
.ak-body-lg {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  max-width: 56ch;
}
.ak-small {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-muted);
}

/* Mono label — nav, tags, folios, eyebrows. Always uppercase + tracked. */
.ak-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: 10px;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.ak-mono-sm {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Link — inline, mono or body, blue with hair underline */
.ak-link {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ============================================================
   FILM GRAIN — the brand's signature surface texture.
   Drop <div class="ak-grain"></div> as a fixed overlay,
   or apply .ak-grain-on to any element.
   ============================================================ */
.ak-grain,
.ak-grain-on::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}
.ak-grain { position: fixed; }
.ak-grain-on { position: relative; }