/* ============================================================
   You were made for a purpose
   Theme: "Dawn over a meadow" — grounded, hopeful, growing
   ============================================================ */

:root {
  /* palette */
  --ink:       #292722;   /* warm near-black soil */
  --ink-soft:  #5d574c;   /* muted secondary text  */
  --canvas:    #f1f4ea;   /* faint sage-white      */
  --canvas-2:  #e7eedc;   /* soft meadow tint      */
  --growth:    #2f6a47;   /* forest green (primary)*/
  --growth-deep:#234f36;
  --sun:       #eba53a;   /* amber — the light     */
  --sun-soft:  #f6ce7e;
  --bloom:     #de7f66;   /* warm coral — agape    */
  --sky:       #93bcc9;   /* soft calm sky         */

  /* type */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* scale */
  --step-xl: clamp(2.4rem, 4.5vw + .5rem, 4rem);
  --step-l:  clamp(1.9rem, 3vw + 1rem, 2.9rem);
  --step-m:  clamp(1.25rem, 1vw + 1rem, 1.5rem);

  --maxw: 1120px;
  --radius: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.1; margin: 0; }
p { margin: 0; }
a { color: inherit; }

.skip-link {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-150%);
  background: var(--ink); color: var(--canvas); padding: .6rem 1rem;
  border-radius: 0 0 12px 12px; z-index: 50; transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

/* ---------- shared bits ---------- */
.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--growth); margin: 0 0 1rem;
}
.eyebrow--center { text-align: center; }

.btn {
  display: inline-block; font-family: var(--body); font-weight: 700; font-size: 1rem;
  padding: .85rem 1.5rem; border-radius: 100px; text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.btn--primary { background: var(--growth); color: #fff; box-shadow: 0 8px 20px -8px rgba(35,79,54,.7); }
.btn--primary:hover { background: var(--growth-deep); transform: translateY(-2px); }
.btn--ghost { color: var(--growth-deep); border: 2px solid rgba(47,106,71,.35); padding-block: calc(.85rem - 2px); }
.btn--ghost:hover { border-color: var(--growth); transform: translateY(-2px); }
.btn--bloom { background: var(--bloom); color: #fff; box-shadow: 0 8px 20px -8px rgba(222,127,102,.8); }
.btn--bloom:hover { background: #cf6f57; transform: translateY(-2px); }

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--maxw); margin: 0 auto; padding: 1.2rem 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--growth-deep); }
.brand__mark { color: var(--growth); display: inline-flex; }
.brand__words { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; }

.site-nav { display: flex; gap: 1.4rem; margin-left: auto; }
.site-nav a {
  text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--ink-soft);
  padding: .3rem 0; position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--sun); transition: width .2s var(--ease);
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--ink); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { width: 100%; }

.help-btn {
  text-decoration: none; font-weight: 700; font-size: .95rem; color: var(--bloom);
  border: 2px solid rgba(222,127,102,.4); padding: .5rem 1rem; border-radius: 100px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.help-btn:hover, .help-btn:focus-visible { background: var(--bloom); color: #fff; }

/* hamburger — hidden on desktop, shown on mobile */
.nav-toggle { display: none; }
.site-nav__help { display: none; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--maxw); margin: 0 auto; padding: 1rem 1.5rem 3.5rem;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2.5rem;
}
.hero__scene { order: 2; display: flex; justify-content: center; }
.scene { width: min(100%, 520px); height: auto; }
.hero__copy { order: 1; max-width: 33rem; }

.hero__title {
  font-size: var(--step-xl); font-weight: 500; letter-spacing: -.015em; margin: 0 0 1.2rem;
}
.hero__title em {
  font-style: italic; color: var(--growth);
  background-image: linear-gradient(transparent 62%, rgba(235,165,58,.45) 62%);
  padding: 0 .05em;
}
.hero__lede { font-size: var(--step-m); color: var(--ink-soft); margin-bottom: 2rem; }
.hero__lede strong { color: var(--ink); font-weight: 700; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- pillars ---------- */
.pillars { max-width: var(--maxw); margin: 0 auto; padding: 4rem 1.5rem; }
.section-head { text-align: center; margin-bottom: 2.5rem; }
.section-head h2 { font-size: var(--step-l); }

.pillar-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.pillar {
  background: #fff; border: 1px solid rgba(47,106,71,.12); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(35,79,54,.55);
  border-color: rgba(47,106,71,.3);
}
.pillar__tag {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--growth);
  background: var(--canvas-2); padding: .25rem .6rem; border-radius: 100px; margin-bottom: .9rem;
}
.pillar h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.pillar p { color: var(--ink-soft); font-size: 1rem; }

/* ---------- three knowings extras ---------- */
.knowings { max-width: var(--maxw); margin: 0 auto; padding: 4rem 1.5rem; }
.knowings .pillar__tag { font-style: normal; }
.pillar p em { font-style: italic; color: var(--growth-deep); font-weight: 700; }
.throughline {
  font-family: var(--display); font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.4;
  text-align: center; max-width: 26ch; margin: 3rem auto 0; color: var(--ink);
}
.throughline em { font-style: italic; color: var(--growth); }
.steward-line {
  text-align: center; max-width: 40ch; margin: 1.2rem auto 0; color: var(--ink-soft); font-size: 1.05rem;
}
.steward-line strong { color: var(--bloom); }

/* ---------- trivium ---------- */
.trivium { background: var(--canvas-2); padding: 4.5rem 1.5rem; }
.eyebrow--sun { color: var(--sun); }
.steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step;
}
.step { position: relative; padding: 1.5rem 1.25rem; }
.step + .step::before {
  content: ""; position: absolute; left: -.9rem; top: 2.4rem; width: .55rem; height: .55rem;
  border-top: 2px solid var(--sun); border-right: 2px solid var(--sun); transform: rotate(45deg);
}
.step__num {
  font-family: var(--display); font-size: 2.6rem; font-weight: 500; line-height: 1;
  color: var(--sun); display: block; margin-bottom: .6rem;
}
.step h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.step p { color: var(--ink-soft); }
.step p em { font-style: italic; color: var(--growth-deep); }
.trivium__note {
  text-align: center; margin: 2.5rem auto 0; color: var(--ink-soft); font-size: 1rem; max-width: 40ch;
}
.trivium__note em { font-family: var(--display); font-style: italic; color: var(--growth); }

/* ---------- big questions ---------- */
.questions { max-width: var(--maxw); margin: 0 auto; padding: 4.5rem 1.5rem; }
.section-sub { max-width: 48ch; margin: 1rem auto 0; color: var(--ink-soft); font-size: var(--step-m); }
.q-list {
  list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: 880px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem;
}
.q-item {
  display: flex; align-items: baseline; gap: 1rem; padding: 1.15rem 0;
  border-bottom: 1px solid rgba(47,106,71,.16); cursor: default;
  transition: padding-left .2s var(--ease);
}
.q-item:hover { padding-left: .5rem; }
.q-item__mark {
  font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--sun);
  line-height: 1; flex: none; transition: transform .2s var(--ease), color .2s var(--ease);
}
.q-item:hover .q-item__mark { transform: scale(1.25); color: var(--bloom); }
.q-item__text {
  font-family: var(--display); font-size: clamp(1.2rem, 1.6vw, 1.55rem); font-weight: 400; color: var(--ink);
}

/* ---------- maxim band ---------- */
.maxim {
  background: linear-gradient(160deg, var(--growth) 0%, var(--growth-deep) 100%);
  color: #fff; text-align: center; padding: 4.5rem 1.5rem;
}
.maxim__eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sun-soft); margin: 0 0 1.3rem;
}
.maxim__quote {
  font-family: var(--display); font-size: clamp(1.6rem, 3.5vw, 2.7rem); font-weight: 400;
  line-height: 1.35; margin: 0 auto; max-width: 20ch;
}
.maxim__quote em { color: var(--sun-soft); font-style: italic; }

/* ---------- help strip ---------- */
.help { padding: 4rem 1.5rem; }
.help__inner {
  max-width: var(--maxw); margin: 0 auto;
  background: var(--canvas-2); border-radius: 24px; padding: 2.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.help__title { font-size: var(--step-l); margin-bottom: .5rem; }
.help__text { color: var(--ink-soft); font-size: var(--step-m); max-width: 46ch; }
.help__text a { color: var(--bloom); font-weight: 700; text-decoration: none; }
.help__text a:hover, .help__text a:focus-visible { text-decoration: underline; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: #d9d3c7; padding: 3.5rem 1.5rem 2rem; }
.foot__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem;
}
.foot__brand .brand__words { color: #fff; display: block; margin-bottom: .6rem; }
.foot__brand p { color: #a59f93; max-width: 28ch; }
.foot__col h4 { font-family: var(--body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #a59f93; margin-bottom: .9rem; }
.foot__col a { display: block; text-decoration: none; color: #d9d3c7; padding: .25rem 0; }
.foot__col a:hover, .foot__col a:focus-visible { color: var(--sun-soft); }
.acknowledgement {
  max-width: var(--maxw); margin: 2.5rem auto 0; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12); color: #a59f93; font-size: .9rem; font-style: italic;
}
.foot__fine { max-width: var(--maxw); margin: .8rem auto 0; color: #837d72; font-size: .85rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 0; }
  .hero__scene { order: 1; }
  .scene { width: min(82%, 360px); }
  .hero__copy { order: 2; max-width: 46ch; margin: 0 auto; }
  .hero__actions { justify-content: center; }
  .site-head { position: relative; flex-wrap: wrap; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 44px; height: 44px; padding: 0; border: none; background: none; cursor: pointer;
    color: var(--growth-deep); border-radius: 12px;
  }
  .nav-toggle:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
  .nav-toggle__box { position: relative; width: 24px; height: 16px; }
  .nav-toggle__box span {
    position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: currentColor;
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }
  .nav-toggle__box span:nth-child(1) { top: 0; }
  .nav-toggle__box span:nth-child(2) { top: 7px; }
  .nav-toggle__box span:nth-child(3) { top: 14px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-left: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--canvas); border-top: 1px solid rgba(47,106,71,.16);
    box-shadow: 0 18px 32px -18px rgba(35,79,54,.55);
    padding: .25rem 1.5rem 1rem;
    overflow: hidden; max-height: 0; opacity: 0; visibility: hidden;
    transition: max-height .28s var(--ease), opacity .2s var(--ease), visibility .28s;
  }
  .site-nav.is-open { max-height: 22rem; opacity: 1; visibility: visible; }
  .site-nav a { padding: .95rem .25rem; font-size: 1.05rem; border-bottom: 1px solid rgba(47,106,71,.1); }
  .site-nav a::after { display: none; }
  .site-nav__help { display: block; color: var(--bloom); font-weight: 700; border-bottom: none; }
  .help-btn { display: none; }

  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: .5rem; max-width: 32rem; }
  .step + .step::before { display: none; }
  .q-list { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .help__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .foot__grid { grid-template-columns: 1fr; }
  .help-btn { display: none; }
}

/* ============================================================
   Motion — one gentle "grow" on load; off by default
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .scene__sun   { transform-box: fill-box; transform-origin: center; animation: rise 1.4s var(--ease) both; }
  .scene__trunk { transform-box: fill-box; transform-origin: bottom; animation: growUp 1s var(--ease) .3s both; }
  .scene__roots { animation: fade 1s ease .5s both; }
  .leaf { transform-box: fill-box; transform-origin: bottom center; animation: pop .6s var(--ease) both; }
  .leaf:nth-of-type(1) { animation-delay: .7s; }
  .leaf:nth-of-type(2) { animation-delay: .82s; }
  .leaf:nth-of-type(3) { animation-delay: .98s; }
  .leaf:nth-of-type(4) { animation-delay: 1.12s; }
  .leaf:nth-of-type(5) { animation-delay: 1.26s; }
  .bud { animation-delay: 1.45s; }

  .hero__copy > * { animation: fadeUp .7s var(--ease) both; }
  .eyebrow      { animation-delay: .1s; }
  .hero__title  { animation-delay: .2s; }
  .hero__lede   { animation-delay: .35s; }
  .hero__actions{ animation-delay: .5s; }
}
@keyframes rise   { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes growUp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fade   { from { opacity: 0; } to { opacity: .85; } }
@keyframes pop    { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   Active nav + inner page (article) template
   ============================================================ */
.site-nav a.is-active { color: var(--ink); }
.site-nav a.is-active::after { width: 100%; }

.page-hero { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 0.5rem; text-align: center; }
.breadcrumb { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.breadcrumb a { color: var(--growth); text-decoration: none; font-weight: 700; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { text-decoration: underline; }
.page-hero h1 { font-size: var(--step-xl); letter-spacing: -.015em; margin: .3rem 0 1rem; }
.page-hero h1 em { font-style: italic; color: var(--growth); }
.page-hero .lede { font-size: var(--step-m); color: var(--ink-soft); max-width: 52ch; margin: 0 auto; }

.prose { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.prose h2 { font-size: var(--step-l); margin: 2.6rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.12rem; color: #3f3a31; margin: 0 0 1.1rem; }
.prose p strong { color: var(--ink); }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.prose li { font-size: 1.12rem; color: #3f3a31; margin: .45rem 0; }

.loves { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.4rem 0 1rem; }
.love-card { background: #fff; border: 1px solid rgba(47,106,71,.14); border-radius: 16px; padding: 1.3rem; }
.love-card .gk { font-family: var(--display); font-style: italic; color: var(--sun); font-size: 1.3rem; line-height: 1; }
.love-card h3 { margin: .25rem 0 .4rem; font-size: 1.25rem; color: var(--growth-deep); }
.love-card p { font-size: 1rem; color: var(--ink-soft); margin: 0; }

.pull { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.4; color: var(--growth-deep); text-align: center; margin: 2.6rem auto; max-width: 34ch; text-wrap: balance; }
.pull em { color: var(--sun); font-style: italic; }

.wonder-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.wonder-list li { font-family: var(--display); font-size: 1.25rem; padding: .5rem 0; color: var(--ink); border-bottom: 1px solid rgba(47,106,71,.12); }
.wonder-list li::before { content: "? "; color: var(--sun); font-style: italic; }

.page-cta { text-align: center; padding: 1.5rem 1.5rem 4.5rem; }

@media (max-width: 540px) {
  .loves { grid-template-columns: 1fr; }
}

/* linked question rows */
.q-item a { display: flex; gap: 1rem; align-items: baseline; width: 100%; text-decoration: none; color: inherit; }
.q-item a:hover .q-item__text, .q-item a:focus-visible .q-item__text { color: var(--growth-deep); }

/* ladder of feelings */
.ladder { max-width: 540px; margin: 1.6rem auto 2rem; display: flex; flex-direction: column; gap: .45rem; }
.rung {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .7rem 1.1rem; background: #fff; border: 1px solid rgba(47,106,71,.14);
  border-left: 5px solid var(--sky); border-radius: 12px;
}
.rung__name { font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.rung__note { color: var(--ink-soft); font-size: .88rem; text-align: right; }
.rung.t-light { border-left-color: var(--sun); }
.rung.t-heavy { border-left-color: #b9a98f; }
.rung--door { background: var(--growth); border-color: var(--growth-deep); border-left-color: var(--sun-soft); }
.rung--door .rung__name { color: #fff; }
.rung--door .rung__note { color: var(--sun-soft); }

/* gentle aside / guardrail note */
.prose .soft-note {
  background: var(--canvas-2); border-left: 4px solid var(--sun);
  border-radius: 0 12px 12px 0; padding: 1rem 1.2rem; margin: 1.5rem 0;
  font-style: italic; color: var(--ink-soft); font-size: 1.05rem;
}
.prose .soft-note strong { font-style: normal; color: var(--ink); }

/* ---------- three layers: warm / mind / spirit ----------
   One truth told three ways. Warm always shows; the other two are
   gentle opt-in expanders so a hurting reader is never flooded.
   Colour + icon come from --accent via currentColor (sprite in header). */
.layers { display: grid; gap: 1rem; margin: 2.2rem 0; }
.layer__icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent); }

/* the warm layer — always open, leads every time */
.layer--warm {
  --accent: var(--bloom);
  background: linear-gradient(180deg, rgba(222,127,102,.10), rgba(222,127,102,.035));
  border: 1px solid rgba(222,127,102,.28);
  border-left: 4px solid var(--bloom);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem .4rem;
}
.layer__tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-weight: 800; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bloom);
  margin: 0 0 .8rem;
}

/* the expandable layers */
.layer--mind   { --accent: #3f7c8c; }   /* deepened sky — the mind   */
.layer--spirit { --accent: #c0892e; }   /* deepened sun — the spirit */
.layer--mind, .layer--spirit {
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--canvas));
  border-radius: var(--radius);
  overflow: hidden;
}
.layer[open] { box-shadow: 0 14px 34px -22px rgba(41,39,34,.55); }

.layer__summary {
  display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.3rem; cursor: pointer; list-style: none;
  transition: background .18s var(--ease);
}
.layer__summary::-webkit-details-marker { display: none; }
.layer__summary:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.layer__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.layer__label { font-family: var(--display); font-weight: 500; font-size: 1.2rem; color: var(--accent); }
.layer__hint {
  margin-left: auto; font-family: var(--body); font-weight: 600;
  font-size: .82rem; color: var(--ink-soft);
}
.layer__chev { width: 1.15rem; height: 1.15rem; flex: none; color: var(--accent); margin-left: .5rem; transition: transform .25s var(--ease); }
.layer[open] .layer__chev { transform: rotate(180deg); }
.layer__body { padding: .2rem 1.5rem .4rem; }
.layer__body > :last-child { margin-bottom: 1.2rem; }

@media (max-width: 560px) {
  .layer__hint { display: none; }
  .layer__chev { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .layer__chev { transition: none; }
}

/* ---------- get help page ---------- */
.help-page { max-width: 760px; margin: 0 auto; padding: 1rem 1.5rem 1.5rem; }
.emergency {
  background: #fbeee9; border: 2px solid var(--bloom); border-radius: 18px;
  padding: 1.2rem 1.5rem; margin: 0 0 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.emergency p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 38ch; }
.emergency strong { color: #c0492f; font-size: 1.1rem; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.help-card {
  background: #fff; border: 1px solid rgba(47,106,71,.16); border-radius: 18px;
  padding: 1.4rem 1.5rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
}
.help-card__body { flex: 1 1 15rem; }
.help-card h3 { font-size: 1.4rem; margin: 0 0 .25rem; }
.help-card p { color: var(--ink-soft); margin: 0; font-size: .98rem; }
.help-card__actions { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; }
.call-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--growth); color: #fff; font-weight: 800; font-size: 1.1rem;
  padding: .7rem 1.3rem; border-radius: 100px; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.call-btn:hover { background: var(--growth-deep); transform: translateY(-1px); }
.call-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.call-btn--urgent { background: var(--bloom); }
.call-btn--urgent:hover { background: #cf6f57; }
.chat-link { text-align: center; font-weight: 700; color: var(--growth-deep); text-decoration: none; font-size: .9rem; }
.chat-link:hover, .chat-link:focus-visible { text-decoration: underline; }

/* three-way card grid (Know Yourself: mind / heart / gut) */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0 1rem; }
@media (max-width: 640px) { .triad { grid-template-columns: 1fr; } }

/* clickable knowing cards on the homepage */
.pillar__link { display: block; text-decoration: none; color: inherit; }

/* "read more" links under the homepage Trivium + maxim bands */
.trivium-more { text-align: center; margin-top: 1.6rem; }
.trivium-more a { color: var(--sun); font-weight: 700; text-decoration: none; }
.trivium-more a:hover, .trivium-more a:focus-visible { text-decoration: underline; }
.maxim__more { margin-top: 1.6rem; }
.maxim__more a { color: var(--sun-soft); font-weight: 700; text-decoration: none; }
.maxim__more a:hover, .maxim__more a:focus-visible { text-decoration: underline; }

/* maxims collection */
.maxim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.2rem 0 1.5rem; }
@media (max-width: 600px) { .maxim-grid { grid-template-columns: 1fr; } }
.maxim-card {
  background: #fff; border: 1px solid rgba(47,106,71,.14); border-left: 4px solid var(--sun);
  border-radius: 0 14px 14px 0; padding: 1.15rem 1.3rem;
  font-family: var(--display); font-size: 1.18rem; line-height: 1.4; color: var(--growth-deep);
}

/* homepage cosmos line — a quiet statement of the worldview */
.cosmos { max-width: 760px; margin: 0 auto; padding: 0.5rem 1.5rem 3rem; text-align: center; }
.cosmos p { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.95rem); line-height: 1.4; color: var(--growth-deep); margin: 0; }
.cosmos em { font-style: italic; color: var(--sun); }

/* ============================================================
   Illustrative scenes — flat, on-brand, hand-built SVG.
   "planting & tending" (child + smiling sun) and "three roads"
   (the Trivium climbing to the truth). All motion is gated behind
   prefers-reduced-motion (static fallback).
   ============================================================ */
.plant-scene { max-width: 720px; margin: 1rem auto 3rem; padding: 0 1.5rem; text-align: center; }
.plant-scene__art { max-width: 420px; margin: 0 auto; }
.plant-scene__art svg { width: 100%; height: auto; display: block; }
.plant-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 42ch;
}
.plant-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }
.ps-drops { opacity: 0; }   /* hidden unless motion is allowed */

@media (prefers-reduced-motion: no-preference) {
  .ps-sun        { transform-box: fill-box; transform-origin: center;        animation: psBob  4.5s ease-in-out infinite alternate; }
  .ps-sun__rays  { transform-box: fill-box; transform-origin: center;        animation: psSpin 60s  linear      infinite; }
  .ps-sapling    { transform-box: fill-box; transform-origin: bottom center; animation: psGrow 1.4s var(--ease) both; }
  .ps-leaves     { transform-box: fill-box; transform-origin: bottom center; animation: psSway 5s   ease-in-out 1.6s infinite alternate; }
  .ps-child__arm { transform-box: fill-box; transform-origin: top right;     animation: psPat  2.6s ease-in-out .4s  infinite; }
  .ps-drops      { opacity: 1; }
  .ps-drop       { transform-box: fill-box; animation: psDrop 2.6s ease-in 1.6s infinite; }
  .ps-drop--2    { animation-delay: 2.1s; }
}
@keyframes psBob  { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes psSpin { to   { transform: rotate(360deg); } }
@keyframes psGrow { from { transform: scale(.12); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); } }
@keyframes psSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes psPat  { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes psDrop { 0% { transform: translateY(-4px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } }

/* "three roads that meet at the truth" — Trivium scene */
.path-scene { max-width: 720px; margin: 2.4rem auto .4rem; padding: 0 1.5rem; text-align: center; }
.path-scene__art { max-width: 360px; margin: 0 auto; }
.path-scene__art svg { width: 100%; height: auto; display: block; }
.path-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .2rem auto 0; max-width: 44ch;
}
.path-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .ts-sun  { transform-box: fill-box; transform-origin: center; animation: psBob 4.5s ease-in-out infinite alternate; }
  .ts-road { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tsDraw 1.3s var(--ease) both; }
  .ts-road--2 { animation-delay: .18s; }
  .ts-road--3 { animation-delay: .36s; }
}
@keyframes tsDraw { to { stroke-dashoffset: 0; } }

/* "the Universe holding a child" — youre-never-alone scene */
.hug-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.hug-scene__art { max-width: 300px; margin: 0 auto; }
.hug-scene__art svg { width: 100%; height: auto; display: block; }
.hug-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 40ch;
}
.hug-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .hug-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .hug-glow   { transform-box: fill-box; transform-origin: center; animation: psBob 6s ease-in-out infinite alternate; }
  .hug-figure { transform-box: fill-box; transform-origin: center bottom; animation: hugBreathe 7s ease-in-out infinite alternate; }
}
@keyframes hugBreathe { from { transform: scale(1); } to { transform: scale(1.014); } }

/* "you are the sky; feelings are weather" — big-feelings scene */
.sky-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.sky-scene__art { max-width: 300px; margin: 0 auto; }
.sky-scene__art svg { width: 100%; height: auto; display: block; }
.sky-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 40ch;
}
.sky-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .sky-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .sky-figure   { transform-box: fill-box; transform-origin: center bottom; animation: hugBreathe 8s ease-in-out infinite alternate; }
  .bf-cloud     { transform-box: fill-box; animation: bfDrift 9s  ease-in-out infinite alternate; }
  .bf-raincloud { transform-box: fill-box; animation: bfDrift 11s ease-in-out 1s infinite alternate-reverse; }
  .bf-storm     { transform-box: fill-box; animation: bfDrift 10s ease-in-out .5s infinite alternate; }
  .bf-sun       { transform-box: fill-box; transform-origin: center; animation: psBob 5s ease-in-out infinite alternate; }
  .bf-drop      { transform-box: fill-box; animation: bfRain 1.8s ease-in infinite; }
  .bf-drop--2   { animation-delay: .5s; }
  .bf-drop--3   { animation-delay: 1s; }
}
@keyframes bfDrift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes bfRain  { 0% { transform: translateY(-3px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

/* "set the heavy rock down" — forgiveness scene */
.forgive-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.forgive-scene__art { max-width: 300px; margin: 0 auto; }
.forgive-scene__art svg { width: 100%; height: auto; display: block; }
.forgive-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 40ch;
}
.forgive-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .forgive-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .fg-child { transform-box: fill-box; transform-origin: center bottom; animation: psBob 4.5s ease-in-out infinite alternate; }
  .fg-bloom { transform-box: fill-box; transform-origin: center; animation: fgPulse 3s ease-in-out 1.4s infinite; }
}
@keyframes fgPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.25); opacity: 1; } }

/* "a seed pushing up through dark soil" — overcoming scene */
.grow-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.grow-scene__art { max-width: 300px; margin: 0 auto; }
.grow-scene__art svg { width: 100%; height: auto; display: block; }
.grow-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 42ch;
}
.grow-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .grow-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .oc-sun    { transform-box: fill-box; transform-origin: center; animation: psBob 5s ease-in-out infinite alternate; }
  .oc-sprout { transform-box: fill-box; transform-origin: center bottom; animation: growUp 1.4s var(--ease) both; }
  .oc-leaves { transform-box: fill-box; transform-origin: bottom center; animation: psSway 5s ease-in-out 1.5s infinite alternate; }
}

/* "a seed of love, given hand to hand" — what-is-love scene */
.give-scene { max-width: 600px; margin: .5rem auto 1.8rem; padding: 0 1.5rem; text-align: center; }
.give-scene__art { max-width: 300px; margin: 0 auto; }
.give-scene__art svg { width: 100%; height: auto; display: block; }
.give-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 42ch;
}
.give-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .give-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .gv-glow { transform-box: fill-box; transform-origin: center; animation: fgPulse 4s ease-in-out infinite; }
  .gv-seed { transform-box: fill-box; transform-origin: center; animation: psBob 3.6s ease-in-out infinite alternate; }
}

/* "three inner guides" — mind-heart-gut scene */
.guide-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.guide-scene__art { max-width: 290px; margin: 0 auto; }
.guide-scene__art svg { width: 100%; height: auto; display: block; }
.guide-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 42ch;
}
.guide-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .guide-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .gg-figure { transform-box: fill-box; transform-origin: center bottom; animation: hugBreathe 8s ease-in-out infinite alternate; }
  .gg-mind   { transform-box: fill-box; transform-origin: center; animation: fgPulse 4.5s ease-in-out 0s   infinite; }
  .gg-heart  { transform-box: fill-box; transform-origin: center; animation: fgPulse 4.5s ease-in-out .7s  infinite; }
  .gg-gut    { transform-box: fill-box; transform-origin: center; animation: fgPulse 4.5s ease-in-out 1.4s infinite; }
}

/* "sitting in the quiet" — going-within scene */
.within-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.within-scene__art { max-width: 290px; margin: 0 auto; }
.within-scene__art svg { width: 100%; height: auto; display: block; }
.within-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 42ch;
}
.within-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }
.wn-cloud { opacity: .55; }   /* visible when motion is reduced */

@media (prefers-reduced-motion: no-preference) {
  .within-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .wn-child { transform-box: fill-box; transform-origin: center bottom; animation: hugBreathe 7s ease-in-out infinite alternate; }
  .wn-calm  { transform-box: fill-box; transform-origin: center; animation: fgPulse 5s ease-in-out infinite; }
  .wn-cloud { opacity: 0; }
  .wn-cloud--l { transform-box: fill-box; animation: wnFloatL 7s ease-in-out infinite; }
  .wn-cloud--r { transform-box: fill-box; animation: wnFloatR 8s ease-in-out 2s infinite; }
}
@keyframes wnFloatL { 0% { transform: translate(0,0); opacity: 0; } 25% { opacity: .6; } 100% { transform: translate(-16px,-12px); opacity: 0; } }
@keyframes wnFloatR { 0% { transform: translate(0,0); opacity: 0; } 25% { opacity: .55; } 100% { transform: translate(16px,-12px); opacity: 0; } }

/* "a path toward the door of light" — the-way-in scene */
.wayin-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.wayin-scene__art { max-width: 290px; margin: 0 auto; }
.wayin-scene__art svg { width: 100%; height: auto; display: block; }
.wayin-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 42ch;
}
.wayin-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .wayin-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .wi-glow   { transform-box: fill-box; transform-origin: center; animation: fgPulse 5s ease-in-out infinite; }
  .wi-door   { transform-box: fill-box; transform-origin: center bottom; animation: hugBreathe 6s ease-in-out infinite alternate; }
  .wi-walker { transform-box: fill-box; transform-origin: center bottom; animation: psBob 3.4s ease-in-out infinite alternate; }
}

/* "you matter — lit from within" and "the oak inside the acorn" scenes */
.worth-scene, .acorn-scene { max-width: 640px; margin: .5rem auto 1.5rem; padding: 0 1.5rem; text-align: center; }
.worth-scene__art, .acorn-scene__art { max-width: 290px; margin: 0 auto; }
.worth-scene__art svg, .acorn-scene__art svg { width: 100%; height: auto; display: block; }
.worth-scene__caption, .acorn-scene__caption {
  font-family: var(--display); font-size: var(--step-m); line-height: 1.5;
  color: var(--ink-soft); margin: .4rem auto 0; max-width: 42ch;
}
.worth-scene__caption strong, .acorn-scene__caption strong { color: var(--growth); font-style: italic; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .worth-scene__art svg, .acorn-scene__art svg { animation: fadeUp 1s var(--ease) both; }
  .wm-child  { transform-box: fill-box; transform-origin: center bottom; animation: hugBreathe 7s ease-in-out infinite alternate; }
  .wm-worth  { transform-box: fill-box; transform-origin: center; animation: fgPulse 4s ease-in-out infinite; }
  .ac-oak    { transform-box: fill-box; transform-origin: center bottom; animation: growUp 1.5s var(--ease) both; }
  .ac-canopy { transform-box: fill-box; transform-origin: center bottom; animation: psSway 6s ease-in-out 1.6s infinite alternate; }
}

/* "One rule, in many voices" — Golden Rule litany (Going Deeper) */
.creed-list { list-style: none; padding: 0; margin: 1.3rem 0; display: grid; gap: 1rem; }
.creed-list li { border-left: 3px solid var(--sun-soft); padding: .15rem 0 .15rem 1.1rem; }
.creed__src { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--growth); margin-bottom: .25rem; }
.creed__words { display: block; font-family: var(--display); font-style: italic; font-size: 1.08rem; line-height: 1.45; color: var(--ink); }
.creed__ref { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: .2rem; }