/* Psychosynthesis page only (/psychosynthesis/). Shared components live in /v2.css. */

/* == PAGE HEAD: faint flower of life behind the title, intro as a lede == */
.psy-head{overflow:hidden}
.psy-head__fol{width:min(150vw,760px);left:50%;top:calc(var(--head-h) - 40px);transform:translateX(-50%);opacity:.22;
  /* fade out well above the head's bottom edge instead of being cut flat by overflow:hidden */
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 62%);mask-image:linear-gradient(180deg,#000 30%,transparent 62%)}
.psy-head__lede{max-width:34em;margin-inline:auto}
.psy-head .lotus-rule{width:min(70%,260px);margin-inline:auto}

/* == EXPLORING THE WHOLE: quote, calm photo band, then the copy == */
.psy-whole .prose{max-width:36em}
.psy-whole .pullquote{margin-block:var(--stack)}
.psy-photo{margin-top:0;margin-bottom:calc(var(--stack) + 14px)}
.psy-photo img{aspect-ratio:1200/514;object-fit:cover}
@media (min-width:861px){.psy-photo{margin-bottom:calc(var(--stack) + 24px)}}

/* == LIVING THE BEAUTY WAY: her phrase gets its own line, large and gold-lined == */
.psy-beauty__panel{text-align:center}
.psy-beauty__text{max-width:34em;margin-inline:auto;text-align:left}
.psy-beauty__name{display:block;width:fit-content;margin:18px auto 0;padding:0 4px 6px;
  font:italic 600 clamp(1.9rem,6.4vw,2.75rem)/1.15 var(--serif);color:var(--plum);text-align:center;
  background:linear-gradient(90deg,rgba(201,162,76,0),var(--gold) 18%,var(--gold) 82%,rgba(201,162,76,0)) bottom/100% 1.5px no-repeat}
.psy-beauty__rule{width:min(70%,240px);margin:var(--group) auto}
.psy-beauty__close{max-width:30em;margin-inline:auto;font:italic 500 clamp(1.25rem,2.2vw,1.5rem)/1.4 var(--serif);color:var(--plum-ink)}

/* == REFLECTION == */
.psy-reflect .pullquote{margin-top:0}
.psy-reflect__text{max-width:32em;margin-inline:auto}

/* == JUMP PILLS under the head (shared look with Coaching) == */
.psy-head .off-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--group)}
.psy-head .off-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;font:500 .875rem/1.2 var(--caps);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--plum);background:rgba(251,247,239,.8);box-shadow:inset 0 0 0 1px var(--panel-line)}
@media (hover:hover) and (pointer:fine){.psy-head .off-jump a:hover{background-color:var(--ivory);box-shadow:inset 0 0 0 1px var(--gold)}}

/* == SEVEN CORE CONCEPTS: seven numbered folds (Rachel's text) == */
.concepts__intro{max-width:36em;margin:0 auto var(--stack)}
.concepts__intro>*+*{margin-top:1em}
.concepts__hint{font:italic 500 clamp(1.15rem,1.7vw,1.3rem)/1.4 var(--serif);color:var(--plum-ink);text-align:center}
.concept-folds .fold__btn{gap:14px;padding-left:12px}
.concept-folds .num{width:46px;height:46px;font-size:.9375rem}
.concept-folds .fold__text b{font-size:clamp(1.3rem,2vw,1.55rem)}
.concept-folds .fold__text small{font:italic 500 1.05rem/1.3 var(--serif)}
.concept-folds .fold.is-open .fold__btn{box-shadow:inset 0 0 0 1.5px var(--gold)}
.concept__body{max-width:36em;margin-inline:auto;padding-inline:6px}
.concept .pullquote{margin:var(--stack) auto}
.concept .pullquote blockquote p{font-size:clamp(1.4rem,2.4vw,1.75rem)}
.concept .pull-line{max-width:none;margin:var(--group) 0 0}
.concept .pull-line em{font-style:italic;font-weight:600;color:var(--plum)}
.concept__egg{text-align:center}
.concept__up{transform:rotate(-90deg)}

/* == FROM AWARENESS TO WHOLENESS == */
.concepts-close .section-head{margin-bottom:var(--group)}
.concepts-close__line{margin-inline:auto}
/* Assagioli quote sits on the fog photo (Carson 2026-11-08: "they shouldn't be separated") */
.psy-quoteimg{position:relative;margin-top:var(--stack)}
.psy-quoteimg img{aspect-ratio:4/5;object-fit:cover;object-position:28% 50%}
.psy-quoteimg .psy-quoteimg__q{position:absolute;left:0;right:0;bottom:0;max-width:none;margin:0;padding:34px 22px 24px;text-align:center;
  background:radial-gradient(70% 85% at 50% 80%,rgba(244,241,232,.82) 0,rgba(244,241,232,.5) 55%,rgba(244,241,232,0) 100%)}
.psy-quoteimg__q::before{top:-4px}
.psy-quoteimg__q blockquote p{font-size:clamp(1.55rem,6.4vw,2.3rem);text-shadow:0 0 18px rgba(244,241,232,.9)}
.psy-quoteimg__by{display:block;margin-top:12px;font:500 .8125rem/1.4 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--plum-ink)}
.psy-quoteimg__by small{display:block;margin-top:4px;font:italic 500 1rem/1.3 var(--serif);letter-spacing:0;text-transform:none}
@media (min-width:600px){.psy-quoteimg img{aspect-ratio:16/10}}
@media (min-width:861px){.psy-quoteimg img{aspect-ratio:2/1;object-position:50% 40%}.psy-quoteimg .psy-quoteimg__q{padding:40px 60px 30px}}
.psy-quoteimg .psy-quoteimg__q{z-index:1;border-radius:0 0 var(--r-card) var(--r-card)}

/* design QA sweep 2026-11-09 */
.psy-quoteimg__by{font-size:.875rem} /* was 13px, floor is 14px */
.psy-head__fol{display:none} /* sat behind the kicker and heading; now matches Coaching: right side, desktop only */
@media (min-width:1021px){.psy-head__fol{display:block;left:auto;transform:none;width:min(17vw,300px);right:max(16px,calc(50% - 860px));top:calc(var(--head-h) - 60px);opacity:.38;-webkit-mask-image:none;mask-image:none}}

/* == PHONES (2026-11-10): progressive disclosure, see MOBILE DISCLOSURE CONTRACT in v2.css ==
   Section headings fold the longer paragraphs under 760px (.fold--m). --fold-gap:0 and the
   gaps below keep the spacing the open text always had, so desktop does not change. */
.psy-whole__fold,.concepts__fold,.concepts-close__fold{--fold-gap:0px}
.concepts-close__fold .fold__body>*+*{margin-top:12px}
@media (max-width:759px){
  /* the photo and Assagioli's quote lead, so the folded text opens right under its heading */
  .psy-whole__fold{display:flex;flex-direction:column}
  .psy-whole__fold>*{width:100%}
  .psy-whole__fold>.psy-quoteimg{order:-1;margin:0 0 var(--stack)}
  .psy-whole__fold>.section-head{margin-bottom:var(--group)}
  .psy-whole__fold>.fold__body>:first-child{margin-top:1em}
  .concepts__fold>.section-head{margin-bottom:var(--group)}
  .concepts__fold>.concepts__intro{margin-bottom:var(--group)}
  .concepts-close .section-head{margin-bottom:var(--group)}
  .psy-whole h2,.concepts h2,.concepts-close h2{text-wrap:balance}
  /* 2026-11-10: the two jump buttons sat under the dock on the first screen; the page below already folds */
  .psy-head .off-jump{display:none}
}
/* Centered phone fold heads: the chevron follows the last word instead of sitting at the far
   edge of a wrapped heading. Same rule in inner-truth, psychosynthesis and about css; it can
   move to v2.css (.fold--center) once the shared file takes it. */
@media (max-width:759px){
  .fold--m.fold--center .fold__head .fold__btn{display:block;text-align:center}
  .fold--m.fold--center .fold__head .fold__text{display:inline}
  .fold--m.fold--center .fold__head .fold__chev{display:inline-grid;vertical-align:.12em;margin-left:10px}
}
