/* Tarot & Reiki (/tarot-reiki/) only. Card, fold and lineage styles come from /css/coaching.css; shared components from /v2.css. */

.tr-head{overflow:hidden;padding-bottom:calc(var(--section) * .6)}
.tr-sessions{padding-top:calc(var(--section) * .6)}
/* lineage inside the More details fold: painting beside the text from 721px */
.tr-lineage__h{margin-top:1.4em;font:600 clamp(1.45rem,2.2vw,1.75rem)/1.2 var(--serif);color:var(--plum)}
.off-lineage .mothers{margin-top:.6em}
.off-medicine{margin-top:var(--group)!important}
@media (max-width:720px){.off-lineage__art{width:min(70%,220px)}}
/* the head here is short: size the flower of life to the head so it is never cut off (Carson 2026-11-08) */
/* phones (2026-11-10): icon beside the name, length and price on one line, so the first card and its
   Book button sit above the dock on the first screen. Order stays: name, length, price, text, Book. */
@media (max-width:640px){
  .tr-head{padding-bottom:calc(var(--section) * .4)}
  .tr-sessions{padding-top:calc(var(--section) * .4)}
  .off-simple .offer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 14px;padding:20px 18px;text-align:left}
  .off-simple .offer .badge{grid-row:1/3;grid-column:1}
  .off-simple .offer__len{grid-column:2/4;grid-row:1;align-self:end;font-size:1.45rem;line-height:1.15;text-wrap:balance}
  .off-simple .offer .card__meta{grid-column:2;grid-row:2}
  .off-simple .offer .card__price{grid-column:3;grid-row:2;font-size:1.9rem;line-height:1.1}
  .off-simple .offer__text{grid-column:1/-1;max-width:none;margin-top:10px}
  .off-simple .offer .btn{grid-column:1/-1;margin-top:14px}
}
/* short phones (360x640, 2026-11-10): about 40px off the head so the first Book button clears the dock */
@media (max-width:640px) and (max-height:660px){
  .tr-head{padding-bottom:0}
  .tr-head h1,.tr-head .sub{margin-top:10px}
  .tr-head .lotus-rule{margin-block:10px}
  .tr-sessions{padding-top:0}
}
/* deep band (2026-11-11): the two session cards and their prices sit on plum (.band-deep in v2.css).
   The More details fold sits at the foot of the band as a glass bar (.band-deep .fold in v2.css; polish 2026-11-11,
   was its own thin light section .tr-more). The band keeps at least 30px above the first card so the gold hairline
   clears it; phones keep the first Book button on screen. */
.tr-sessions .offer__len,.tr-sessions .card__price{color:var(--gold-hi)}
.tr-sessions .off-after{color:var(--gold-soft)}
.tr-sessions.band-deep{padding-top:calc(var(--section) * .6 + 18px)}
/* the open fold on plum: quote in ivory, its name in gold */
.tr-fold .off-medicine blockquote p{color:var(--ivory)}
.tr-fold .off-medicine figcaption{color:var(--gold-soft)}
.tr-fold .off-lineage__text b{color:var(--gold-hi)}
.tr-fold .mothers li::before{background:var(--gold-soft)} /* the lotus bullets read brown on plum in --gold */
@media (max-width:640px){.tr-sessions.band-deep{padding-top:32px}}
/* short phones (641px tall): no top hairline and a tighter first card, so its Book button still clears the dock */
@media (max-width:640px) and (max-height:660px){
  .tr-sessions.band-deep{padding-top:14px}
  .tr-sessions.band-deep::before{display:none}
  .tr-sessions .off-simple .offer{padding-block:16px}
  .tr-sessions .off-simple .offer__text{margin-top:6px}
  .tr-sessions .off-simple .offer .btn{margin-top:10px}
}
@media (min-width:1021px){.tr-head .off-head__fol{top:calc(var(--head-h) - 6px);bottom:14px;height:auto;width:auto;aspect-ratio:1;right:max(16px,calc(50% - 760px))}}