/* Kindled Growth — shared design tokens and base styles.
   Loaded on every page so the brand (nav, buttons, type, color) stays consistent. */

:root {
  --color-bg: #f3f2f2;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* body copy sits at 78% ink; the darker shades stay literal at their few call sites */
  --color-muted: color-mix(in srgb, #201e1d 78%, transparent);

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;

  /* layout: the page gutter and content width, previously repeated 8x each */
  --page-max: 1320px;
  --page-inset: clamp(20px, 4vw, 56px);

  /* motion: one ladder, smallest gesture to largest, plus the single endless loop.
     Every animation and transition on the site picks from this list. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);  /* lands hard and stops: "resolved" */
  --stagger: 70ms;         /* the page's tempo: beats, rows, cards, menu links */
  --stagger-tight: 24ms;   /* dense fields only: the 25 hero cells */
  --stagger-cap: 4;        /* index past which reveal delay stops growing */
  --dur-1: 120ms;      /* micro: colour, border */
  --dur-2: 200ms;      /* control state: background fill, icon morph */
  --dur-3: 320ms;      /* one element entering or leaving */
  --dur-4: 480ms;      /* a composed entrance */
  --dur-5: 720ms;      /* signature: page-level entrance */
  --dur-ambient: 34s;  /* the ticker marquee, the only endless motion */

  /* nav height: 12px padding + 44px control + 12px padding + 2px border */
  --nav-h: 70px;
}

html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; text-wrap: pretty; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration: none; transition: color var(--dur-1) var(--ease-out); }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — reveal-on-scroll —
   The hidden state is gated on html.kg-anim, which the page script adds as its
   own first act, inside a try/catch, immediately before it starts observing.
   If the script is disabled, never parses, or throws at any point before it
   arms, nothing is ever hidden and the page reads as plain HTML. Content is
   never lost to a JavaScript failure.

   This is a transition, not a one-shot animation, so it runs both ways: scroll
   down and items settle in, scroll back up and they lift back out, ready to
   play again. A keyframe animation would only ever fire forwards.

   The stagger delay is applied in JS (index.html), not here: it used to be a
   transition-delay driven by a custom property set via inline style, but that
   combination could fail to parse/apply reliably. That also means this comment
   block used to be malformed -- unclosed, with the stray text below parsed as
   part of the selector -- which silently dropped this entire rule in every
   browser. The hide/show itself (:not(.is-revealed) below) still worked since
   it's a separate rule, so items snapped instantly with no transition at all
   rather than fading, which is what was actually being seen. */
.kg-anim [data-reveal] {
  transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out);
}
.kg-anim [data-reveal]:not(.is-revealed) { opacity: 0; translate: 0 16px; }
/* a keyboard user must never land focus on a target they cannot see */
.kg-anim [data-reveal]:focus-within { opacity: 1; translate: none; }

/* — shared nav — */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-3) clamp(20px, 5vw, 64px); border-bottom: 2px solid var(--color-divider); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: inherit; }
.nav-mark { display: grid; grid-template-columns: 7px 7px; grid-template-rows: 7px 7px; gap: 2px; }
.nav-mark span:nth-child(1) { background: var(--color-accent); }
.nav-mark span:nth-child(2) { background: var(--color-text); }
.nav-mark span:nth-child(3) { background: var(--color-text); }
.nav-mark span:nth-child(4) { background: var(--color-accent); }
.nav-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { color: inherit; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; }
/* mobile toggle: icon only, bars morph into an X */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: transparent; border: 0; cursor: pointer; color: inherit; }
.nav-toggle-bars { position: relative; display: block; width: 24px; height: 2px; }
.nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--color-text); transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.nav-toggle-bars span:nth-child(1) { transform: translateY(-7px); }
.nav-toggle-bars span:nth-child(2) { background: var(--color-accent); }
.nav-toggle-bars span:nth-child(3) { transform: translateY(7px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: rotate(-45deg); }

/* full-screen mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 19;
  display: grid; align-content: start;
  padding: calc(var(--nav-h) + clamp(18px, 6vw, 36px)) clamp(20px, 6vw, 40px) clamp(28px, 8vw, 56px);
  background: var(--color-bg);
  opacity: 0; visibility: hidden; overscroll-behavior: contain;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.mobile-menu-open { opacity: 1; visibility: visible; animation: none; transition: opacity var(--dur-3) var(--ease-out), visibility 0s; }
.mobile-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: clamp(13px, 3vw, 18px) 0; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent); color: inherit; font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 9vw, 44px); letter-spacing: -0.03em; line-height: 1.05; }
.mobile-menu a::after { content: attr(data-num); font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.1em; color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.mobile-menu a.cta { justify-content: center; margin-top: clamp(22px, 6vw, 32px); padding: clamp(16px, 4vw, 20px); border-bottom: 0; background: var(--color-accent); color: var(--color-bg); font-size: clamp(16px, 4.4vw, 19px); letter-spacing: 0; }
.mobile-menu a.cta::after { content: none; }
.mobile-menu-open a { animation: kg-menu-in var(--dur-4) var(--ease-out) both; }
.mobile-menu-open a:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu-open a:nth-child(2) { animation-delay: 0.10s; }
.mobile-menu-open a:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu-open a:nth-child(4) { animation-delay: 0.20s; }
@keyframes kg-menu-in { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
body.menu-open { overflow: hidden; }

@media (max-width: 779px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* — shared footer — */
footer { max-width: var(--page-max); margin: 0 auto; padding: clamp(24px, 4vw, 40px) var(--page-inset); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
footer .footer-tagline { margin-right: auto; }
footer a { color: inherit; }
footer a:hover { color: var(--color-accent); }