/* ====================================================================
   Frame Playbook v1.0 — primitive layer (static HTML)
   Loaded once via <link rel="stylesheet" href="/frame.css">.
   Additive: works alongside the existing site CSS without overrides.
   ==================================================================== */

/* ---- Tone tokens (mirror brand tokens, used by .frame-tone-*) ---- */
:root {
  --tone-dark-bg:  #1F4141;
  --tone-deep-bg:  #0F2626;
  --tone-light-bg: #F4F6F6;
  --tone-cream-bg: #F7F3ED;
  --tone-dark-fg:  #ffffff;
  --tone-deep-fg:  #ffffff;
  --tone-light-fg: #1F4141;
  --tone-cream-fg: #1F4141;
  --frame-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- ScrollFrame ---- */
.scroll-frame {
  position: relative;
  min-height: 100svh;
  padding: 8rem 1.5rem 5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .scroll-frame { padding: 9rem 2.5rem 6rem; }
}
.scroll-frame > .frame-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ---- Tone presets ---- */
.frame-tone-dark  { background: var(--tone-dark-bg);  color: var(--tone-dark-fg);  }
.frame-tone-deep  { background: var(--tone-deep-bg);  color: var(--tone-deep-fg);  }
.frame-tone-light { background: var(--tone-light-bg); color: var(--tone-light-fg); }
.frame-tone-cream { background: var(--tone-cream-bg); color: var(--tone-cream-fg); }

/* ---- Eyebrow ---- */
.eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem;
  color: var(--brand-light-teal, #59C3C3);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brand-orange, #FB4803);
  flex-shrink: 0;
}
.frame-tone-light .eyebrow,
.frame-tone-cream .eyebrow { color: rgba(31,65,65,0.7); }

/* ---- H1 scale ---- */
.h1-hero,
.h1-xl,
.h1-xxl,
.h1-split {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  margin: 0;
}
.h1-hero  { font-size: clamp(50px, 9.9vw, 144px); line-height: 0.92; letter-spacing: -0.03em;  }
.h1-xl    { font-size: clamp(40px, 6.3vw,  94px); line-height: 1;    letter-spacing: -0.025em; }
.h1-xxl   { font-size: clamp(50px, 8.1vw, 126px); line-height: 0.98; letter-spacing: -0.025em; }
.h1-split { font-size: clamp(38px, 5vw,    74px); line-height: 1.02; letter-spacing: -0.025em; }
.h1-hero em, .h1-xl em, .h1-xxl em, .h1-split em {
  font-style: italic;
  color: var(--brand-orange, #FB4803);
}
.h1-hero em.confirm, .h1-xl em.confirm, .h1-xxl em.confirm, .h1-split em.confirm {
  color: var(--brand-light-teal, #59C3C3);
}

/* ---- Sub paragraph ---- */
.sub {
  font-family: 'Geist', system-ui, sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  max-width: 580px;
  margin-top: 1.5rem;
  color: rgba(255,255,255,0.78);
}
.frame-tone-light .sub,
.frame-tone-cream .sub { color: rgba(31,65,65,0.7); }

/* ---- CTA row ---- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2.5rem;
}

/* ---- Primary CTA (orange pill on dark; dark pill on light) ---- */
.cta-primary-dark,
.cta-primary-light {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 9999px;
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  min-height: 48px;
  text-decoration: none;
  transition: transform .25s var(--frame-ease), background .25s var(--frame-ease), box-shadow .25s var(--frame-ease);
  white-space: nowrap;
}
.cta-primary-dark {
  background: var(--brand-orange, #FB4803);
  color: #fff;
  box-shadow: 0 10px 40px -12px rgba(251,72,3,0.6);
}
.cta-primary-dark:hover {
  background: #ff5c1a;
  transform: translateY(-2px);
  color: #fff;
}
.cta-primary-light {
  background: #1F4141;
  color: #fff;
  box-shadow: 0 10px 40px -12px rgba(31,65,65,0.45);
}
.cta-primary-light:hover {
  background: #0F2626;
  transform: translateY(-2px);
  color: #fff;
}
.cta-primary-dark::after,
.cta-primary-light::after {
  content: '→';
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  transition: transform .25s var(--frame-ease);
}
.cta-primary-dark:hover::after,
.cta-primary-light:hover::after { transform: translateX(4px); }

/* ---- Secondary CTA (text link with ↗) ---- */
.cta-secondary-dark,
.cta-secondary-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid currentColor;
  transition: color .2s ease;
}
.cta-secondary-dark  { color: var(--brand-light-teal, #59C3C3); }
.cta-secondary-light { color: #1F4141; }
.cta-secondary-dark:hover  { color: #fff; }
.cta-secondary-light:hover { color: var(--brand-orange, #FB4803); }
.cta-secondary-dark::after,
.cta-secondary-light::after {
  content: '↗';
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  transition: transform .25s var(--frame-ease);
}
.cta-secondary-dark:hover::after,
.cta-secondary-light:hover::after { transform: translate(2px, -2px); }

/* ---- Stat inline ---- */
.stat-inline { display: inline-flex; flex-direction: column; gap: 6px; }
.stat-inline .num {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  color: var(--brand-light-teal, #59C3C3);
}
.stat-inline .label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.frame-tone-light .stat-inline .label,
.frame-tone-cream .stat-inline .label { color: rgba(31,65,65,0.55); }

/* ---- Adaptive Nav reactions (sets data-tone-context on <nav>) ----
   Smooth cross-fade between tones: background, color, border, shadow
   all interpolate on the same easing curve so the swap feels like a
   dissolve, not a flip. Children also transition color so text doesn't
   snap ahead of the bar. */
nav {
  transition:
    max-width .35s var(--frame-ease),
    padding .35s var(--frame-ease),
    background-color .55s var(--frame-ease),
    color .55s var(--frame-ease),
    border-color .55s var(--frame-ease),
    box-shadow .55s var(--frame-ease),
    backdrop-filter .55s var(--frame-ease);
}
nav .nav-mark,
nav .nav-links a,
nav .nav-mark-dot {
  transition: color .55s var(--frame-ease), background-color .55s var(--frame-ease);
}

/* Subtle gradient accent under the nav — fades in on light tones,
   fades out on dark. Pure CSS, no extra DOM. */
nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(89,195,195,0) 20%,
    rgba(89,195,195,0.45) 50%,
    rgba(251,72,3,0) 80%,
    transparent 100%);
  opacity: 0;
  transition: opacity .55s var(--frame-ease);
  pointer-events: none;
}
nav[data-tone-context="light"]::after,
nav[data-tone-context="cream"]::after { opacity: 1; }

nav[data-tone-context="light"],
nav[data-tone-context="cream"] {
  background: rgba(247,243,237,0.6) !important;
  color: #1F4141 !important;
  border-bottom-color: rgba(31,65,65,0.08) !important;
}
nav[data-tone-context="light"] .nav-mark,
nav[data-tone-context="cream"] .nav-mark { color: #1F4141 !important; }
nav[data-tone-context="light"] .nav-links a,
nav[data-tone-context="cream"] .nav-links a { color: rgba(31,65,65,0.65) !important; }
nav[data-tone-context="light"] .nav-links a:hover,
nav[data-tone-context="cream"] .nav-links a:hover { color: var(--brand-orange, #FB4803) !important; }
nav[data-tone-context="light"] .nav-mark-dot,
nav[data-tone-context="cream"] .nav-mark-dot { background: var(--brand-orange, #FB4803) !important; }

/* ---- Scroll-expand Nav (sets .is-scrolled on <nav>) ---- */
nav.is-scrolled {
  margin: 12px auto 0 !important;
  left: 50% !important;
  transform: translateX(-50%);
  right: auto !important;
  max-width: 1180px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  box-shadow: 0 12px 40px -16px rgba(0,0,0,0.45);
}
nav.is-scrolled[data-tone-context="light"],
nav.is-scrolled[data-tone-context="cream"] {
  border-color: rgba(31,65,65,0.12) !important;
  box-shadow: 0 12px 40px -16px rgba(31,65,65,0.18);
}

/* ---- Custom cursor ---- */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: transform .12s ease-out, width .25s var(--frame-ease), height .25s var(--frame-ease);
  will-change: transform;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid #59C3C3;
  border-radius: 999px;
  margin-left: -14px;
  margin-top: -14px;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #FB4803;
  border-radius: 999px;
  margin-left: -3px;
  margin-top: -3px;
  transition: transform .06s ease-out;
}
.cursor-ring.is-hover { width: 56px; height: 56px; margin-left: -28px; margin-top: -28px; }
@media (hover: none), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .cta-primary-dark, .cta-primary-light,
  .cta-primary-dark::after, .cta-primary-light::after,
  .cta-secondary-dark::after, .cta-secondary-light::after,
  nav, nav::after, nav .nav-mark, nav .nav-links a, nav .nav-mark-dot,
  .cursor-ring, .cursor-dot { transition: none !important; }
}

/* ============================================================
   SIGNATURE — handwritten personal mark (Allan Njoroge)
   Used sparingly: hero opener, essay sign-offs, founding story
   close, Connect handshake. Never a logo replacement.
   ============================================================ */
.signature {
  display: block;
  width: 220px;
  height: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
}
.signature.in-view,
.signature.is-loaded { opacity: 1; transform: translateY(0); }
.signature--sm { width: 140px; }
.signature--md { width: 220px; }
.signature--lg { width: 320px; }
.signature--center { margin-left: auto; margin-right: auto; }
/* Light variant: white ink for dark backgrounds. The asset is already
   white, so we drop the multiply blend (which would erase it) and use
   screen instead so the ink lifts cleanly off teal/deep tones. */
.signature--light {
  mix-blend-mode: screen;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08));
}
/* Inline variant for nav-mark / foot-mark — sits next to the wordmark
   on the same baseline, scales with surrounding text, never blocks layout. */
.signature--inline {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  height: 1.6em;
  margin-left: 12px;
  opacity: 0.85;
  transform: translateY(-0.05em);
  transition: opacity .35s var(--frame-ease);
}
.signature--inline.signature--light { mix-blend-mode: screen; }
.nav-mark .signature--inline { height: 2.6em; margin-left: 14px; opacity: 0.85; transform: translateY(-0.1em); }
.nav-mark:hover .signature--inline { opacity: 1; }
.foot-mark .signature--inline { height: 2.4em; margin-left: 16px; opacity: 0.9; }
.signature--ink { position: relative; padding-bottom: 18px; }
.signature--ink::after {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 56px; height: 1px;
  background: var(--teal, #59C3C3);
  opacity: 0.55;
  transform: translateX(-50%);
}
@media (prefers-reduced-motion: reduce) {
  .signature { opacity: 1; transform: none; transition: none; }
}