/* ============================================================
   RightThing brand tokens, v1. August 2026.
   Source of truth: rt-brand-standard-v2.pdf
   Load Libre Franklin first:
   <link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---- Color. Brass appears in three places only:
     the mark's index, the primary CTA, and link accents. ---- */
  --rt-ink:    #1A1815;   /* backgrounds, primary text on paper */
  --rt-paper:  #F2EDE3;   /* light surfaces, primary text on ink */
  --rt-brass:  #C9A227;   /* accent, spent sparingly */
  --rt-gray:   #6B6862;   /* secondary text on paper */
  --rt-stone:  #CFC9BC;   /* secondary text on ink, muted labels */
  --rt-hairline-dark:  rgba(242, 237, 227, 0.16);  /* rules on ink */
  --rt-hairline-light: rgba(26, 24, 21, 0.16);     /* rules on paper */

  /* ---- Type. Two voices: Franklin speaks, mono annotates. ---- */
  --rt-font-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --rt-font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --rt-weight-regular: 400;
  --rt-weight-medium:  500;   /* headings and wordmark weight */
  --rt-weight-semibold: 600;  /* small headings only */

  --rt-track-tight: -0.01em;  /* headings, matches the wordmark */
  --rt-track-label: 0.16em;   /* mono labels, matches the tagline */

  /* ---- Scale. Desktop first, clamps handle mobile. ---- */
  --rt-text-display: clamp(2.75rem, 6vw, 5.25rem);  /* hero */
  --rt-text-h2:      clamp(2rem, 4vw, 3.25rem);     /* section heads */
  --rt-text-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --rt-text-body:    1.125rem;
  --rt-text-small:   0.9375rem;
  --rt-text-label:   0.8125rem;
  --rt-leading-tight: 1.1;    /* display and h2 */
  --rt-leading-body:  1.6;

  /* ---- Space. 8px base. ---- */
  --rt-space-1: 0.5rem;
  --rt-space-2: 1rem;
  --rt-space-3: 1.5rem;
  --rt-space-4: 2.5rem;
  --rt-space-5: 4rem;
  --rt-space-6: 6.5rem;   /* between sections */
  --rt-radius: 10px;
}

/* ---- Base voice ---- */
body {
  font-family: var(--rt-font-sans);
  font-weight: var(--rt-weight-regular);
  font-size: var(--rt-text-body);
  line-height: var(--rt-leading-body);
  background: var(--rt-ink);
  color: var(--rt-paper);
}

h1, h2 {
  font-weight: var(--rt-weight-medium);
  letter-spacing: var(--rt-track-tight);
  line-height: var(--rt-leading-tight);
}
h1 { font-size: var(--rt-text-display); }
h2 { font-size: var(--rt-text-h2); }
h3 { font-size: var(--rt-text-h3); font-weight: var(--rt-weight-semibold); }

/* ---- Mono label. WEEK 1, EST. 2026, essay bylines, form labels.
   Muted by default so brass stays meaningful. ---- */
.rt-label {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-label);
  font-weight: var(--rt-weight-regular);
  letter-spacing: var(--rt-track-label);
  text-transform: uppercase;
  color: var(--rt-stone);
}

/* ---- Timeline days. Every day muted, the decision day brass.
   Apply rt-label plus rt-day; add rt-day--index on Day 10 only. ---- */
.rt-day { color: var(--rt-stone); }
.rt-day--index { color: var(--rt-brass); }

/* ---- Numbered entries. Essay index and the 01 02 03 offerings. ---- */
.rt-index-number {
  font-family: var(--rt-font-mono);
  letter-spacing: var(--rt-track-label);
  color: var(--rt-stone);
  margin-right: var(--rt-space-2);
}

/* ---- The short brass rule under headings. Keep it rare. ---- */
.rt-rule {
  width: 3.5rem;
  height: 2px;
  background: var(--rt-brass);
  border: 0;
  margin: var(--rt-space-3) 0;
}

/* ---- Primary CTA. The one brass block per view. ---- */
.rt-btn {
  display: inline-block;
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-label);
  letter-spacing: var(--rt-track-label);
  text-transform: uppercase;
  color: var(--rt-ink);
  background: var(--rt-brass);
  padding: 1.1em 2.2em;
  border: 0;
  text-decoration: none;
}
.rt-btn:hover { background: #D8B336; }

/* ---- Secondary action, ghost on ink ---- */
.rt-btn--ghost {
  background: transparent;
  color: var(--rt-paper);
  box-shadow: inset 0 0 0 1px var(--rt-hairline-dark);
}
.rt-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--rt-paper); }

/* ---- Links inside prose ---- */
a.rt-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rt-brass);
  text-underline-offset: 0.2em;
}
a.rt-link:hover { color: var(--rt-brass); }

/* ---- Hairline rules and cards ---- */
.rt-hr { border: 0; border-top: 1px solid var(--rt-hairline-dark); }
.rt-card {
  border: 1px solid var(--rt-hairline-dark);
  border-radius: var(--rt-radius);
  padding: var(--rt-space-4);
}

/* ---- Paper section variant, for future light-band sections ---- */
.rt-section--paper {
  background: var(--rt-paper);
  color: var(--rt-ink);
}
.rt-section--paper .rt-label { color: var(--rt-gray); }
.rt-section--paper .rt-hr { border-top-color: var(--rt-hairline-light); }

/* ---- Form fields ---- */
.rt-field {
  font-family: var(--rt-font-sans);
  font-size: var(--rt-text-body);
  color: var(--rt-paper);
  background: transparent;
  border: 1px solid var(--rt-hairline-dark);
  border-radius: 6px;
  padding: 0.9em 1em;
  width: 100%;
}
.rt-field:focus {
  outline: none;
  border-color: var(--rt-brass);
}