/* TRYBE — holding site. Brand: parchment, clay, moss, gold; Lora + Inter. */
:root {
  --parchment: #f5f0e8;
  --warm: #ddd8cf;
  --ink: #2e2a26;
  --ink-soft: #5c5248;
  --ink-muted: #6e6457;
  --clay: #c4846a;
  --clay-bright: #d5805a;
  --clay-mid: #9b5e4a;
  --clay-dark: #834a38;
  --clay-light: #f0ddd5;
  --moss: #6b7c5c;
  --moss-bright: #7e9460;
  --moss-dark: #4f5c41;
  --moss-light: #e4ead9;
  --gold: #cb9a4c;
  --gold-dark: #80601f;
  --stone-900: #1a1714;
  --line: rgba(46, 42, 38, 0.14);
  --line-strong: rgba(46, 42, 38, 0.22);
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--parchment);
  background-image:
    radial-gradient(1200px 640px at 50% -6%, #fdfaf3 0%, rgba(253,250,243,0) 62%),
    radial-gradient(820px 460px at 88% 2%, rgba(203,154,76,0.1) 0%, rgba(203,154,76,0) 58%),
    radial-gradient(760px 460px at 10% 10%, rgba(196,132,106,0.09) 0%, rgba(196,132,106,0) 60%);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); }
a { color: inherit; }

.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 680px; }

/* ── Nav ─────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 240, 232, 0.9);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line-strong);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .mark { height: 34px; width: auto; }
.brand .word { font-family: var(--serif); font-size: 20px; letter-spacing: 0.22em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 8px 12px; font-size: 14px; color: var(--ink-soft);
  text-decoration: none; border-radius: 6px; transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--clay); border-radius: 0; }
.nav-cta { display: inline-block; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  padding: 10px 18px; border-radius: 8px; text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.btn-primary { background: var(--stone-900); color: var(--parchment); border: 1px solid var(--stone-900); }
.btn-primary:hover { background: #000; }
.btn-clay { background: var(--clay-mid); color: #fff; border: 1px solid var(--clay-mid); }
.btn-clay:hover { background: #854a38; }
.btn-outline { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.btn-outline:hover { color: var(--ink); border-color: var(--clay); }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ── Sections ────────────────────────────────────── */
section { padding-block: 0; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clay-mid); margin: 0 0 12px; }
.lead { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--ink-soft); }

/* Hero */
.hero { position: relative; overflow: hidden; text-align: center; padding-block: 72px 56px; }
.hero .arch-bg {
  position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
  width: 820px; max-width: 150%; opacity: 0.1; pointer-events: none;
}
.hero-mark { height: 108px; width: auto; margin: 0 auto 8px; display: block; }
.hero-word { font-family: var(--serif); font-size: 40px; letter-spacing: 0.3em; margin: 0 0 4px; }
.hero-tag { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--clay-mid); margin: 0 0 28px; }
.hero h1 { font-size: clamp(34px, 6vw, 52px); font-weight: 300; line-height: 1.12; margin: 0; text-wrap: balance; }
.hero h1 em { font-style: italic; color: var(--clay-mid); }
.hero .lead { max-width: 40rem; margin: 26px auto 0; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.coming-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  background: rgba(203,154,76,0.14); border: 1px solid rgba(203,154,76,0.4);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--ink-soft);
}
.coming-pill b { color: var(--gold-dark); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.1em; }

.divider { display: block; height: 16px; width: 150px; margin: 48px auto; color: var(--clay); opacity: 0.6; }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-block: 8px; }
.pillar { text-align: center; }
.pillar .dot { display: block; width: 10px; height: 10px; border-radius: 50%; margin: 14px auto; }
.pillar h3 { font-size: 20px; margin: 0; }
.pillar p { font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); margin: 10px 0 0; }

.section-head { margin-bottom: 8px; }
.section-head h2 { font-size: clamp(26px, 4vw, 32px); font-weight: 300; margin: 0; }

/* ── Course cards ────────────────────────────────── */
.courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.course {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: #fffdf9;
  box-shadow: 0 1px 2px rgba(46,42,38,0.04);
}
.course .accent { height: 6px; }
.course-body { padding: 20px 22px; flex: 1; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.badge { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; }
.b-soon { background: rgba(203,154,76,0.2); color: var(--gold-dark); }
.b-cpd { background: var(--moss-light); color: var(--moss-dark); }
.b-level { background: #f0ece5; color: #5c5248; }
.b-format { background: var(--clay-light); color: var(--clay-dark); }
.course h3 { font-size: 19px; font-weight: 500; margin: 0 0 8px; line-height: 1.25; }
.course p { font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.course-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); background: #faf7f2; padding: 12px 22px; font-size: 12px; color: var(--ink-muted); }

/* ── Pathway (journey) ───────────────────────────── */
.pathway { position: relative; margin-top: 8px; }
.pathway .rail { position: absolute; left: 15px; top: 16px; bottom: 24px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, rgba(213,128,90,0.7), rgba(107,124,92,0.5), rgba(79,92,65,0.75)); }
.tier { position: relative; display: flex; gap: 18px; padding-bottom: 28px; }
.tier:last-child { padding-bottom: 0; }
.node { position: relative; z-index: 1; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--parchment); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.node .ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--moss); }
.node.gate .ring { border-color: var(--clay-bright); background: var(--clay-bright); }
.node.cap .ring { border-color: var(--moss-dark); background: var(--moss-dark); }
.tier-body { min-width: 0; flex: 1; }
.tier-body.tint-gate { background: rgba(240,221,213,0.3); border-radius: 12px; padding: 16px 18px; }
.tier-body.tint-cap { background: rgba(228,234,217,0.45); border-radius: 12px; padding: 16px 18px; }
.tier-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.tier-label h3 { font-size: 17px; font-weight: 500; margin: 0; }
.tag { border-radius: 5px; padding: 2px 8px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.tag-gate { background: var(--clay-mid); }
.tag-cap { background: var(--moss); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 13px; }
.chip b { font-family: var(--serif); color: var(--clay-mid); font-weight: 500; }
.steps { margin: 0 0 10px; padding: 0; list-style: none; }
.steps li { display: flex; gap: 10px; font-size: 13px; margin: 6px 0; }
.steps li b { font-family: var(--serif); color: var(--moss-dark); }
.tier-note { font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ── Reading / prose ─────────────────────────────── */
.reading { padding-block: 8px; }
.reading .meta { font-size: 12px; color: var(--ink-muted); border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.prose { font-size: 17px; font-weight: 300; line-height: 1.8; color: var(--ink); }
.prose p { margin: 0 0 22px; }
.prose p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4em; line-height: 0.8; float: left; margin: 6px 12px 0 0; color: var(--clay-mid); }

/* ── Callout / CTA band ──────────────────────────── */
.band { background: var(--stone-900); color: var(--parchment); }
.band .wrap { padding-block: 56px; text-align: center; }
.band h2 { color: var(--parchment); font-size: clamp(26px, 4vw, 34px); font-weight: 300; margin: 0 0 14px; }
.band p { font-weight: 300; color: #d8d2c7; max-width: 38rem; margin: 0 auto 10px; }
.band .mail { font-family: var(--serif); font-size: 18px; color: var(--clay); text-decoration: none; }
.band .mail:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────────── */
.footer { background: var(--stone-900); color: #a79e90; border-top: 1px solid rgba(255,255,255,0.08); }
.footer .wrap { padding-block: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer .f-brand { font-family: var(--serif); letter-spacing: 0.2em; color: #c9c0b2; font-size: 18px; }
.footer .f-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
.footer a { color: #a79e90; text-decoration: none; }
.footer a:hover { color: #d8d2c7; }
.footer .f-copy { font-size: 12px; width: 100%; color: #857c6f; }

.pad { padding-block: 56px; }
.pad-sm { padding-block: 36px; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 760px) {
  .nav-links { display: none; }
  .pillars { grid-template-columns: 1fr; gap: 28px; }
  .courses-grid { grid-template-columns: 1fr; }
  .brand .word { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }