/* ============================================================
   NTONTAN — brand theme
   Single source of truth for colours, type, and UI primitives
   across all ntontan.com sites (main + tif / lihtc / atlas / …).
   Source palette: brandingcolorguidentontan.pdf
   Fonts referenced relative to this file at ../fonts/ — keep the
   kit's folder structure, or edit the @font-face urls to match
   wherever you serve the fonts.
   ============================================================ */

/* ---- Brand fonts (self-hosted) ---- */
@font-face {
  font-family: 'Futura';
  src: url('../fonts/futura-bold.otf') format('opentype');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display';
  src: url('../fonts/neuehaas-roman.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display';
  src: url('../fonts/neuehaas-medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display';
  src: url('../fonts/neuehaas-bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- NTONTAN brand palette (source of truth) --- */
  --ntontan-mortar:      #1f1f1f;   /* ink / near-black text            */
  --ntontan-soil:        #3b671b;   /* secondary green                  */
  --ntontan-flora:       #134937;   /* deep green — dark surfaces        */
  --ntontan-flora-700:   #0e3a2b;   /* deeper green for depth            */
  --ntontan-heat:        #e4531c;   /* PRIMARY accent / data colour      */
  --ntontan-heat-bright: #ef6a38;   /* HEAT brightened for dark surfaces */
  --ntontan-amber:       #c98500;   /* warn/attention (light)            */
  --ntontan-amber-dark:  #d99a1e;   /* warn/attention (dark)             */
  --ntontan-paper:       #f7f5ef;   /* warm paper — light surfaces       */
  --ntontan-paper-dim:   #ece7da;

  /* --- Role tokens (reference these in components) --- */
  --ink:        var(--ntontan-mortar);
  --paper:      var(--ntontan-paper);
  --paper-dim:  var(--ntontan-paper-dim);
  --flora:      var(--ntontan-flora);
  --heat:       var(--ntontan-heat);
  --heat-bright:var(--ntontan-heat-bright);

  /* Back-compat aliases (older code referenced these names) */
  --gold:       var(--ntontan-heat);
  --gold-soft:  var(--ntontan-heat-bright);
  --indigo:     var(--ntontan-flora);
  --indigo-700: var(--ntontan-soil);

  /* Pillar coding — green-forward, legible on paper and deep green */
  --dev:      var(--ntontan-heat);   /* Development */
  --planning: #6aa03f;               /* Planning    */
  --research: #2f8f76;               /* Research    */

  /* Neutrals (warm, olive-biased) */
  --muted:   #5c5f55;
  --hairline: rgba(31, 31, 31, 0.14);
  --hairline-on-dark: rgba(247, 245, 239, 0.18);

  /* Type — Futura (display) + Neue Haas Grotesk Display (text) */
  --display: 'Futura', 'Futura PT', 'Century Gothic', system-ui, sans-serif;
  --body: 'Neue Haas Grotesk Display', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
  --label: 'Neue Haas Grotesk Display', 'Helvetica Neue', system-ui, sans-serif;
  --mono: var(--label); /* legacy role name for tracked uppercase labels */

  /* Fluid type scale */
  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.33rem, 1.2rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-3:  clamp(2.6rem, 2rem + 3vw, 4.4rem);
  --step-4:  clamp(3.4rem, 2.4rem + 5vw, 6.5rem);

  --wrap: 1180px;
  --gutter: clamp(1.2rem, 5vw, 3.5rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

a { color: inherit; text-decoration-color: var(--heat); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }

/* --- Layout helpers --- */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 7rem); }

/* --- Eyebrow: small tracked uppercase label --- */
.eyebrow {
  font-family: var(--label);
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 0.6em;
}
/* Ananse Ntontan (spider's web) mark leads each eyebrow label */
.eyebrow::before {
  content: ""; width: 1.1em; height: 1.1em;
  background: url("../logos/anansentontan-outline-heat.svg") center / contain no-repeat;
}
.on-dark .eyebrow::before { background-image: url("../logos/anansentontan-outline-bright.svg"); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--label); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.85em 1.4em; border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none; background: var(--ink); color: var(--paper);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* HEAT fill with near-black text (~4.9:1) — the brand's data button */
.btn--on-dark { border-color: var(--heat); background: var(--heat); color: var(--ntontan-mortar); }
.btn--on-dark:hover { background: transparent; color: var(--paper); }

/* --- Signature heat-thread divider --- */
.thread { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--heat), transparent); }

/* --- Dark section: deep FLORA green --- */
.on-dark { background: var(--flora); color: var(--paper); }
.on-dark .eyebrow { color: var(--heat-bright); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--paper); }

/* --- Pillar chip --- */
.chip {
  font-family: var(--label); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3em 0.7em; border: 1px solid currentColor; border-radius: 100px; display: inline-block;
}
.chip[data-pillar="development"] { color: var(--dev); }
.chip[data-pillar="planning"]    { color: var(--planning); }
.chip[data-pillar="research"]    { color: var(--research); }

/* --- Focus visibility (quality floor) --- */
:focus-visible { outline: 2px solid var(--heat); outline-offset: 3px; }

/* --- Prose (article bodies) --- */
.prose { max-width: 68ch; }
.prose p { margin-block: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }

/* Ananse Ntontan symbol as the content-list bullet */
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.75em; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.26em;
  width: 1em; height: 1em;
  background: url("../logos/anansentontan-outline-heat.svg") center / contain no-repeat;
}
.on-dark .prose ul li::before { background-image: url("../logos/anansentontan-outline-bright.svg"); }