/* Era landing page — design tokens
   Source of truth: Era Design System (Claude Design). Existing values unchanged; three additions marked NEW. */
:root {
  /* Era Design System — existing */
  --era-navy:      #0A1F44;
  --era-orange:    #F7931A;   /* every primary CTA, the live reading, hover. Navy text on it. */
  --era-ocean:     #4A90A4;   /* Curiosity chapter tint, chart lines */
  --era-bg-light:  #F5F7FA;
  --era-gray-text: #5A6577;
  --era-success:   #2F8F4E;
  --era-danger:    #E04B43;
  --era-warn:      #D89A2E;

  /* Landing-page additions — NEW */
  --era-gold:      #B8963E;   /* the mark: kickers, hairlines on dark, italic lines. Never a button. */
  --era-paper:     #F6F1E8;   /* warm page ground */
  --era-sand:      #EBE4D6;   /* second warm ground */
  --era-gold-deep: #7A6429;   /* the mark's gold deepened to 5.1:1 on paper: small labels on light grounds. Never a button. */

  /* derived */
  --era-ink:            #1B1F2A;
  --era-navy-2:         #10285A;               /* instrument panel ground */
  --era-paper-on-dark:  rgba(246,241,232,0.86);
  --era-paper-dim:      rgba(246,241,232,0.70);
  --era-rule:           rgba(10,31,68,0.14);
  --era-rule-on-dark:   rgba(246,241,232,0.18);
  --era-scrim:          linear-gradient(transparent 30%, rgba(10,31,68,0.55) 100%);

  /* type — as the Era Design System specifies */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1:      clamp(44px, 6.2vw, 88px);
  --fs-h2:      clamp(32px, 3.8vw, 54px);
  --fs-h2-dark: clamp(30px, 3.4vw, 48px);
  --fs-reading: clamp(40px, 4.4vw, 64px);
  --fs-lead:    clamp(17px, 1.5vw, 22px);
  --fs-body:    clamp(16px, 1.3vw, 19px);
  --fs-small:   14px;
  --fs-kicker:  12px;

  /* space & shape */
  --gutter:     clamp(20px, 4.4vw, 64px);
  --section-y:  clamp(56px, 6.7vw, 96px);
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 999px;

  /* motion — Era Design System ease, plus durations */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-reveal:   700ms;
  --t-fast:     200ms;
  --t-hero:     20s;
}

html { color-scheme: light; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--era-paper);
  color: var(--era-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
p { text-wrap: pretty; }
.num, .reading { font-feature-settings: "tnum"; }
.kicker { font-size: var(--fs-kicker); letter-spacing: 0.14em; text-transform: uppercase; color: var(--era-gold); font-weight: 600; }
.stance { font-family: var(--font-display); font-style: italic; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.btn-primary { background: var(--era-orange); color: var(--era-navy); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-nav { background: var(--era-navy); color: var(--era-paper); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--era-gold); outline-offset: 3px; }