/* =========================================================================
   Wayfinder / 111 Learnings — Colors & Type
   Brand: Kai Küfner · The Wayfinder · 111 Learnings
   Palette sampled directly from brand assets (Praxis-Guide PDF cover,
   Instagram quote grid, question posts).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* -------- CORE PALETTE ------------------------------------------------- */

  /* Navy — the brand's anchoring color. Two flavours exist in the source. */
  --ink:           #0E1B2C;   /* deepest navy, PDF + YouTube banner */
  --navy:          #091F48;   /* primary brand navy, Instagram quote series */
  --navy-soft:     #1A2A4A;   /* one step lighter — hover/elevated surfaces */
  --navy-veil:     rgba(9, 31, 72, .72); /* for protection overlays on photos */

  /* Gold — the brand mark color. Used for the KEY symbol + headlines. */
  --gold:          #AE873A;   /* rich gold, the Praxis-Guide rectangle */
  --gold-deep:     #8E6A28;   /* pressed / underline state */
  --gold-soft:     #DEC57F;   /* sandy gold — text on navy */
  --sand:          #E0C780;   /* sand background (question posts) */

  /* Parchment / paper neutrals */
  --paper:         #F4EFE3;   /* warm cream paper, workbook fill */
  --bone:          #F8F5EE;   /* near-white, slightly warmed */
  --white:         #FFFFFF;
  --ink-50:        rgba(14, 27, 44, .04);
  --ink-100:       rgba(14, 27, 44, .08);
  --ink-200:       rgba(14, 27, 44, .14);
  --ink-500:       rgba(14, 27, 44, .55);
  --ink-700:       rgba(14, 27, 44, .78);

  /* On-navy text steps */
  --on-navy-1:     #F8F5EE;   /* primary text on navy */
  --on-navy-2:     #DEC57F;   /* gold accent text on navy */
  --on-navy-3:     rgba(248, 245, 238, .72);
  --on-navy-4:     rgba(248, 245, 238, .48);

  /* Semantic */
  --bg:            var(--navy);
  --bg-alt:        var(--ink);
  --fg:            var(--on-navy-1);
  --fg-muted:      var(--on-navy-3);
  --accent:        var(--gold);
  --accent-soft:   var(--gold-soft);
  --rule:          rgba(222, 197, 127, .28); /* gold hairline on navy */
  --rule-paper:    rgba(14, 27, 44, .14);    /* navy hairline on paper */

  /* -------- TYPOGRAPHY --------------------------------------------------- */

  /* Three families, three jobs:
     1. CINZEL — small-caps display. Roman capitals, sermons-on-stone feel.
                 Used for: PRAXIS-GUIDE, MEIN ERFOLGSLOG, section markers.
     2. CORMORANT GARAMOND — display serif. The "quote" voice.
                 Used for: pillar quotes ("Systems outlast motivation."),
                 book-cover lockups, the Praxis-Guide cover title.
     3. PLUS JAKARTA SANS — modern humanist sans. The "speak plainly" voice.
                 Used for: bold headlines ("Erfolg ist (d)eine Entscheidung"),
                 UI labels, body copy, numbered section headers. */

  --font-display:  'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --font-serif:    'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-sans:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — slow, generous. The brand is contemplative, not punchy. */
  --t-hero:        clamp(56px, 7.5vw, 120px);
  --t-display:     clamp(40px, 5vw, 80px);
  --t-h1:          clamp(32px, 3.6vw, 56px);
  --t-h2:          clamp(26px, 2.6vw, 40px);
  --t-h3:          22px;
  --t-h4:          18px;
  --t-body:        17px;
  --t-body-sm:     15px;
  --t-meta:        13px;
  --t-micro:       11px;

  /* Line heights */
  --lh-tight:      1.06;
  --lh-snug:       1.20;
  --lh-normal:     1.45;
  --lh-relaxed:    1.65;
  --lh-quote:      1.55;  /* the "Cormorant on navy" line height */

  /* Tracking — Cinzel needs air; sans bold needs almost none. */
  --tr-display:    .04em;
  --tr-caps:       .14em;   /* small-caps headers, "01 | REFLEXIONSFRAGEN" */
  --tr-caps-tight: .08em;
  --tr-body:       0;

  /* -------- SPACING & RADII --------------------------------------------- */

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* The brand uses ONE distinctive radius pattern: large + rounded-on-one-end
     (the gold "envelope" rectangle on the Praxis-Guide cover). Plus modest
     rectangles everywhere else. No bubbly pills. */
  --r-sm:  2px;
  --r-md:  6px;
  --r-lg:  14px;
  --r-xl:  28px;
  --r-envelope: 0 0 28px 0; /* sharp top-left, rounded bottom-right */

  /* -------- SHADOWS ----------------------------------------------------- */
  /* Used sparingly. The brand prefers flat blocks over elevation. */
  --shadow-1: 0 1px 0 rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 4px 16px rgba(9, 31, 72, .12);
  --shadow-3: 0 18px 48px rgba(9, 31, 72, .28);

  /* -------- MOTION ------------------------------------------------------ */
  --ease-out:     cubic-bezier(.2,.7,.2,1);
  --ease-in-out:  cubic-bezier(.65,0,.35,1);
  --dur-fast:     150ms;
  --dur-base:     240ms;
  --dur-slow:     480ms;
}

/* -------- SEMANTIC ELEMENT STYLES --------------------------------------- */

html { color-scheme: light; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display caps (the "engraved" voice) */
.display-caps,
h1.display-caps {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tr-caps-tight);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* Serif quote (the "Cormorant on navy" voice) */
.quote-serif {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-quote);
  letter-spacing: 0;
}

/* Sans headline (the "speak plainly" voice) */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  letter-spacing: -.01em;
  line-height: var(--lh-snug);
  margin: 0;
}
h1 { font-size: var(--t-h1); font-weight: 800; line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 700; }
h4 { font-size: var(--t-h4); font-weight: 600; }

p { margin: 0 0 1em; }

/* The "01 | LABEL" caps marker used on Praxis-Guide pages */
.section-marker {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--gold);
}

/* Code / mono — used very rarely, but defined */
code, pre, .mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
}

/* Links */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gold); }

/* Selection */
::selection { background: var(--gold-soft); color: var(--ink); }

/* Hairline rule — the gold divider used in the book lockup */
.hair {
  border: 0;
  border-top: 1px solid var(--gold);
  width: 56px;
  height: 0;
  margin: 1rem 0;
  opacity: .9;
}