/* Page 2 /inner-truth/ "Reconnecting With Your Inner Truth". Uses v2.css tokens only. */

/* == Opening: pond visual + faint golden spiral behind the wording == */
.it-open{isolation:isolate;overflow-x:clip;padding-top:calc(var(--section) / 2)}
/* the whole spiral, centred on the photo/panel seam; the translucent panel lets its curls read through */
.it-spiral{position:absolute;z-index:-1;left:50%;top:50%;width:min(820px,96vw);transform:translate(-50%,-50%) rotate(-12deg);opacity:.3}
.it-open .it-panel{background:rgba(251,247,239,.6);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
@media (max-width:860px){.it-spiral{top:auto;bottom:8%;width:min(440px,118vw);opacity:.26;transform:translateX(-50%) rotate(-12deg)}}
.it-split{align-items:start}
.it-pond{max-width:520px;width:calc(100% - 14px);margin-inline:auto}
.it-pond img{aspect-ratio:3/2;object-fit:cover}
.it-panel{text-align:center}
.it-panel>*+*{margin-top:14px}
.it-panel .lotus-rule{margin-block:16px 20px}
.it-panel p{max-width:34em;margin-inline:auto}
.it-panel p:not(.lede):not(.it-line){text-align:left}
.it-line{font:italic 500 clamp(1.3rem,2.2vw,1.6rem)/1.35 var(--serif);color:var(--plum);text-align:center}
@media (min-width:861px){
  .it-split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}
  .it-pond{width:auto;max-width:none;margin:0 24px 24px 0}
  .it-pond img{aspect-ratio:1}
}

/* == Turning point cards == */
/* closed cards in one row share a height (toggle sits at the bottom); once any card opens, rows go back to start so a closed neighbour never stretches */
.xcards{align-items:stretch}
.xcards:has(.xcard.is-open){align-items:start}
.xcard{display:flex;flex-direction:column}
.xcard__top{flex:1 0 auto;display:flex;flex-direction:column}
.xcard__top>.num,.xcard__top>.xcard__art{align-self:center}
.xcard__top>.xcard__toggle{margin-top:auto;padding-top:16px}
.it-turn .section-head h2{max-width:16em;margin-inline:auto}
.xcard__more p:not(.xcard__end):not(.brushed){text-align:left}
.xcard__end{text-align:center;font:italic 500 clamp(1.25rem,2vw,1.45rem)/1.35 var(--serif);color:var(--plum);padding-top:4px}
.xcard__end::before{content:"";display:block;width:64px;height:1px;margin:0 auto 14px;background:var(--gold)}
/* 2-col range (1021-1219): row 2 (Life Transitions + Soul Alchemy) hugs its content, so the short card never carries a blank band */
@media (min-width:1021px) and (max-width:1219px){.xcards>.xcard:nth-child(n+3){align-self:start}}
/* 1220+ (below 1220 card 02 runs 6 lines and leaves a 58px gap): cards 01-03 in one row of three (line counts within one of each other), Soul Alchemy full width below with a held reading measure. Departure from the spec's two-column grid. */
@media (min-width:1220px){
  .xcards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .xcard--alchemy{grid-column:1/-1}
  .xcard--alchemy .xcard__top,.xcard--alchemy .xcard__more{padding-inline:max(34px,calc((100% - 46em) / 2))}
}

/* Soul Alchemy: her mockup (spiral, lotus rule, leaf list, brushed gold closing line) */
.xcard--alchemy{isolation:isolate}
.it-alchemy__spiral{position:absolute;z-index:-1;right:0;top:0;width:min(360px,70%);opacity:.26}
.it-alchemy__rule{width:min(100%,260px)}
.xcard--alchemy .xcard__top>.it-alchemy__rule{margin-top:12px}
.it-list{list-style:none;padding:0;display:grid;gap:14px}
.it-list li{position:relative;padding-left:34px}
.it-list li::before{content:"";position:absolute;left:0;top:.28em;width:22px;height:14px;background:var(--gold);-webkit-mask:var(--svg-lotus) center/contain no-repeat;mask:var(--svg-lotus) center/contain no-repeat}
.xcard--alchemy .brushed{margin-top:22px}

/* == Closing == */
.it-close{isolation:isolate;overflow:clip}
/* the spiral lives inside the panel, so its rounded edge clips any tail */
.it-close__spiral{position:absolute;z-index:-1;left:50%;top:50%;width:min(640px,90vw);transform:translate(-50%,-50%) rotate(140deg);opacity:.24;margin:0!important}
.it-close__panel{max-width:820px;margin-inline:auto;text-align:center;isolation:isolate;overflow:hidden;background:rgba(251,247,239,.6)}
.it-close__panel>*+*{margin-top:14px}
.it-close__panel>.it-close__spiral+*{margin-top:0}
.it-close__panel .lotus-rule{margin-block:16px 20px}
.it-close__panel p{max-width:34em;margin-inline:auto}
/* deep dusk band (2026-11-11): the closing words sit straight on the band, no panel; the spiral stays */
.band-deep .it-close__panel{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
.band-deep .it-line{color:var(--gold-hi)}
.band-deep .it-close__spiral{opacity:.32}

/* == PHONES (2026-11-10): progressive disclosure, see MOBILE DISCLOSURE CONTRACT in v2.css ==
   Opening and closing panels: the heading folds the longer text (.fold--m). Gaps match the
   panel rhythm (14px) on every screen, so desktop keeps its spacing. */
.it-panel,.it-close__panel{--fold-gap:0px}
.it-panel .fold__body>*+*,.it-close__panel .fold__body>*+*{margin-top:14px}
@media (max-width:759px){
  .it-panel h2{text-wrap:balance}
}
/* 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}
}
/* Turning point cards (.it-turn--m): a compact row like the home crossroads (2026-11-10).
   Number badge, then title and subtitle left aligned, then the chevron in its own end column.
   The whole top of the card is the tap target (.xcard__toggle::before). The page script
   moves the lead question into the panel and sets data-fold-group (one open at a time). */
@media (max-width:759px){
  .it-turn--m .xcard__top{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;column-gap:12px;align-items:center;padding:16px 10px 16px 16px;text-align:left}
  .it-turn--m .xcard__top>*{grid-column:2;margin-top:0}
  .it-turn--m .xcard__top>.num{grid-column:1;grid-row:1/span 3;width:40px;height:40px;font-size:.9375rem}
  .it-turn--m .xcard__top>.xcard__art{grid-column:1;grid-row:1/span 3;width:40px;height:40px;margin:0} /* the drawing as a 40px mark, as on the home cards */
  .it-turn--m .xcard__top>.xcard__toggle{grid-column:3;grid-row:1/span 3;width:44px;min-height:44px;margin:0;padding:0}
  .it-turn--m .xcard__title{font-size:1.3125rem;line-height:1.2;text-wrap:balance}
  .it-turn--m .xcard__kicker{margin-top:2px;font-size:1.0625rem}
  .it-turn--m .xcard__sub{margin-top:4px;font-size:1.0625rem;line-height:1.3}
  .it-turn--m .it-alchemy__rule{display:none} /* the lotus rule stays a desktop flourish */
  .it-turn--m .xcard__toggle .when-closed,.it-turn--m .xcard__toggle .when-open{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .it-turn--m .xcard__chev{width:36px;height:36px}
  .it-turn--m .xcard__chev svg{width:16px;height:16px}
  .it-turn--m .xcard.is-open .xcard__chev{box-shadow:0 0 0 3px rgba(243,226,180,.8)}
  .it-turn--m .xcard__more>.xcard__lead{text-align:center;font-weight:500;color:var(--plum-ink)}
}