/* ============================================================
   OnTheRise.ai + AI-Fluent Family — Design Tokens
   Quiet Authority: typography-led, minimal, restrained.
   Two brands, one system. Canvas + accent differ; everything else is shared.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Type families ---------- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ---------- Type scale (1.25 modular, base 18) ---------- */
  --step--1: 0.75rem;     /* 12px  - micro, uppercase labels */
  --step-0:  0.875rem;    /* 14px  - small meta */
  --step-1:  1rem;        /* 16px  - ui */
  --step-2:  1.125rem;    /* 18px  - body default */
  --step-3:  1.5rem;      /* 24px  - subhead */
  --step-4:  2rem;        /* 32px  - h3 */
  --step-5:  2.75rem;     /* 44px  - h2 / display s */
  --step-6:  4.25rem;     /* 68px  - h1 / display m */
  --step-7:  6rem;        /* 96px  - hero oversize */

  /* Leading */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --lh-loose: 1.75;

  /* Tracking */
  --track-display: -0.02em;
  --track-body:    -0.005em;
  --track-label:   0.14em;   /* uppercase eyebrow/meta */

  /* ---------- Space (8-pt grid, 4 named steps) ---------- */
  --space-tight:    8px;
  --space-default: 16px;
  --space-loose:   32px;
  --space-airy:    64px;
  --space-cavern: 128px;     /* section breaks only */

  /* ---------- Radius ---------- */
  --radius-sm:   2px;   /* small ui, hairlines */
  --radius:      4px;   /* default */
  --radius-card: 12px;  /* cards, images */
  --radius-pill: 999px; /* reserved for primary cta */

  /* ---------- Motion ---------- */
  --ease:          cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      120ms;
  --dur:           200ms;
  --dur-slow:      400ms;
  --dur-cinema:    640ms;  /* signature section fade-up */

  /* ---------- Layout ---------- */
  --page-max: 1200px;
  --text-max: 66ch;
  --hairline: 1px;
}

/* ============================================================
   BRAND: OnTheRise.ai — "Amber Rise"
   ============================================================ */
[data-brand="otr"],
.otr {
  --canvas:       #FAFAF7;
  --ink:          #0B0D10;
  --ink-muted:    #6B6F74;
  --hairline-ink: #E5E3DC;
  --accent:       #E8A33D;
  --accent-hover: #C98A28;
  --accent-ink:   #1A1410;   /* text on amber — warm black for contrast */

  /* Dual-ring focus: inner canvas gap + outer ink ring. Works on any bg. */
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
}

/* ============================================================
   BRAND: AI-Fluent Family — "Heritage Ochre"
   ============================================================ */
[data-brand="aff"],
.aff {
  --canvas:       #F4EFE6;
  --ink:          #1A1410;
  --ink-muted:    #6B5F52;   /* shifted from #7A6F62 — now 5.6:1 on canvas, passes AA for body */
  --hairline-ink: #E0D8C8;
  --accent:       #B8772E;
  --accent-hover: #9A6222;
  --accent-ink:   #FAFAF7;   /* text on ochre — near-white */

  /* Dual-ring focus: inner canvas gap + outer ink ring. Works on any bg. */
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-2);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

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

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

hr {
  border: 0;
  height: var(--hairline);
  background: var(--hairline-ink);
  margin: var(--space-airy) 0;
}

/* ---------- Display type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.5rem, 5.5vw + 1rem, var(--step-6)); }
h2, .h2 { font-size: clamp(2rem,   3vw + 1rem,   var(--step-5)); line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--step-4); line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--step-3); line-height: var(--lh-snug); }

em, .serif-em { font-style: italic; font-weight: 400; }

/* ---------- Body type ---------- */
p, li {
  max-width: var(--text-max);
  color: var(--ink);
  margin: 0 0 var(--space-default);
}

p + p { margin-top: 0; }

.lede {
  font-size: var(--step-3);
  line-height: var(--lh-snug);
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 28ch;
}

.muted { color: var(--ink-muted); }

/* ---------- Eyebrow / kicker ---------- */
/* Ink-colored text + accent rule prefix.
   Rationale: accent at 12px text fails WCAG AA (2–3.5:1 per brand).
   The rule carries the accent, the word stays readable. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-default);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  flex: 0 0 auto;
}

/* ---------- Links ---------- */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.link {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

/* ---------- Focus ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-loose);
}
@media (max-width: 640px) { .container { padding: 0 var(--space-default); } }

.stack > * + * { margin-top: var(--space-default); }
.stack-loose > * + * { margin-top: var(--space-loose); }
.stack-airy > * + * { margin-top: var(--space-airy); }

.row {
  display: flex;
  gap: var(--space-default);
  align-items: center;
  flex-wrap: wrap;
}

.hairline { border-top: 1px solid var(--hairline-ink); }

.section {
  padding-block: var(--space-cavern);
}
@media (max-width: 768px) { .section { padding-block: var(--space-airy); } }

.section-tight { padding-block: var(--space-airy); }

/* ---------- Signature section fade-up ---------- */
.rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-cinema) var(--ease-out),
              transform var(--dur-cinema) var(--ease-out);
}
.rise.in-view { opacity: 1; transform: translateY(0); }

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

/* ---------- Skip-to-content link (a11y) ---------- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--canvas);
  font-size: var(--step-1);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease);
  z-index: 100;
}
.skip-link:focus {
  transform: translateY(0);
  outline: none;
}

.measure { max-width: var(--text-max); }
.measure-tight { max-width: 48ch; }

.mono { font-family: var(--font-mono); font-feature-settings: "zero"; }