/* chakras.css: The Seven Chakras (Rosemary, 17 Oct 2026; docs/copy/SEVEN_CHAKRAS_ROSEMARY_2026-10-17.md).
   The fourth theme of the Path of Remembrance on the homepage: her introduction and the lotus on the left, the seven
   rows on the right from 1024, one column below that. Restyled 18 Oct 2026 (De'Andre: "fit the vibe and aesthetic
   of her website … they look too video game, too AI") in the astrology wheel's manner: the site's violet ground,
   gold hairlines, cream text, fine-lined drawings and no glow. Her seven colours stay exact on the petals, numbers
   and divider lines; the centre shapes are gold. Root and Third Eye are under 4.5:1 as text on violet, so their
   number and name use a lighter tint of the same colour (--ck-*-text).
   Every colour lives in this first :root block (scripts/check.mjs). */
:root{
  /* her seven colours, exactly as she gave them */
  --ck-root:#ef3340; --ck-sacral:#f28c28; --ck-solar:#f1c40f; --ck-heart:#32cd68;
  --ck-throat:#329bff; --ck-third:#7460dd; --ck-crown:#b968ef;
  /* as text: Root 4.49:1 and Third Eye 3.84:1 on --night fail, so 20% lighter (5.0 and 4.9:1 on --deep) */
  --ck-root-text:#f25c66; --ck-third-text:#9080e4;
}

/* ---- the frame: the page's own ground inside one gold hairline ---- */
.path-theme.chakras{position:relative;border-top:0;margin-block:var(--s5);padding:var(--s7) var(--s4) var(--s6);
  border:1px solid var(--gold-line-soft);border-radius:var(--r-s)}
.path-theme.chakras::before{content:"";position:absolute;inset:6px;border:1px solid var(--gold-line-soft);border-radius:var(--r-s);pointer-events:none;opacity:.6}

/* ---- left: her introduction ---- */
.ck-intro{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;max-width:560px;margin-inline:auto}
.ck-intro .text-2{margin:0;max-width:52ch}
.ck-moon{width:40px;height:100px;margin-top:calc(var(--s7) * -1);overflow:visible}
.ck-thread{fill:none;stroke:var(--gold-line);stroke-width:1}
.ck-star{fill:var(--gold)}
.ck-crescent{fill:none;stroke:var(--gold-2);stroke-width:1.2}
.ck-title{font:var(--w-display) var(--t1)/var(--lh1) var(--f-display);color:var(--gold-2);max-width:12ch;text-wrap:balance}
.ck-sub{margin:0;font:italic 400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream);max-width:26ch;text-wrap:balance}
.ck-intro .orn-rule{width:100%;max-width:240px}
/* the lotus: muted violet petals with gold hairline edges, three ripples, a few quiet stars */
.ck-lotus{display:block;width:min(100%,340px);height:auto;margin-top:var(--s4);overflow:visible}
.ck-lotus path{stroke-linejoin:round}
.ck-pb > path:first-child{fill:var(--deep);stroke:var(--gold-line);stroke-width:1}
.ck-pm > path:first-child{fill:var(--violet);stroke:var(--gold-line);stroke-width:1}
.ck-pf > path:first-child{fill:var(--card-2);stroke:var(--gold-2);stroke-width:1}
.ck-vein{fill:none;stroke:var(--gold-line-soft);stroke-width:1}
.ck-pf .ck-vein{stroke:var(--gold-line)}
.ck-water path{fill:none;stroke:var(--gold-line);stroke-width:1}
.ck-water path:nth-child(2){stroke:var(--gold-line-soft)} .ck-water path:nth-child(3){stroke:var(--gold-line-soft);opacity:.7}
.ck-lotus-heart{fill:var(--gold-2)}
.ck-star-dot{fill:var(--star)} .ck-star-dot-1{fill:var(--star-3)} .ck-star-dot-2{fill:var(--star-2)}
@media (prefers-reduced-motion:no-preference){
  .ck-star-dot{animation:ck-twinkle 5s ease-in-out infinite}
  .ck-star-dot-1{animation-delay:-1.7s} .ck-star-dot-2{animation-delay:-3.4s;animation-duration:7s}
}
@keyframes ck-twinkle{0%,100%{opacity:.9}50%{opacity:.25}}

/* ---- right: the seven ---- */
.ck-list{list-style:none;margin:0;padding:0}
.ck{position:relative;display:grid;grid-template-columns:24px 56px minmax(0,1fr);column-gap:var(--s3);align-items:center;padding:var(--s4) 0}
.ck-root{--ck:var(--ck-root);--ck-text:var(--ck-root-text)}
.ck-sacral{--ck:var(--ck-sacral);--ck-text:var(--ck-sacral)}
.ck-solar{--ck:var(--ck-solar);--ck-text:var(--ck-solar)}
.ck-heart{--ck:var(--ck-heart);--ck-text:var(--ck-heart)}
.ck-throat{--ck:var(--ck-throat);--ck-text:var(--ck-throat)}
.ck-third{--ck:var(--ck-third);--ck-text:var(--ck-third-text)}
.ck-crown{--ck:var(--ck-crown);--ck-text:var(--ck-crown)}
.ck-n{font:italic 400 30px/1 var(--f-display);color:var(--ck-text);text-align:center}
.ck-glyph{display:block;width:56px;height:56px}
/* the symbols, drawn in fine line: petals and ring in her colour, the centre shape in gold */
.ck-sym{display:block;width:100%;height:100%;overflow:visible;color:var(--ck)}
.ck-petals{fill:color-mix(in srgb,var(--ck) 8%,transparent);stroke:currentColor;stroke-width:1.1;stroke-linejoin:round}
.ck-far{stroke-width:.8;opacity:.75}
.ck-crown .ck-petals{stroke-width:.8}
.ck-disc{fill:none;stroke:currentColor;stroke-width:1.1}
.ck-core{fill:none;stroke:var(--gold-2);stroke-width:1.3;stroke-linejoin:round}
.ck-fill{fill:color-mix(in srgb,var(--gold-2) 22%,transparent)}
.ck-sacral .ck-fill{fill:var(--gold-2)}
.ck-dot{fill:var(--gold-2)}
.ck-text{display:grid;gap:2px}
.ck-name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;margin:0;font:var(--w-heading) var(--t3)/var(--lh3) var(--f-display);color:var(--ck-text)}
.ck-sa{font:italic 400 var(--t4)/var(--lh4) var(--f-display);color:var(--cream-3)}
.ck-theme{margin:0;font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2)}
.ck-desc{margin:var(--s1) 0 0;color:var(--cream-2);max-width:56ch}
/* the line under each row: one hairline in her colour, softened toward the ends */
.ck-line{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ck) 55%,transparent) 12%,color-mix(in srgb,var(--ck) 55%,transparent) 88%,transparent)}
.ck-body{display:grid;align-content:start}

/* phone: number, symbol and name side by side, the description the full width under them */
@media (max-width:767.98px){
  .ck{row-gap:var(--s1);align-items:center}
  .ck-text{display:contents}
  .ck-n,.ck-glyph{grid-row:1 / span 2}
  .ck-name{grid-column:3;grid-row:1;align-self:end}
  .ck-theme{grid-column:3;grid-row:2;align-self:start}
  .ck-desc{grid-column:1 / -1;grid-row:3;margin-top:var(--s2)}
}

/* ---- tablet and up ---- */
@media (min-width:768px){
  .path-theme.chakras{padding:var(--s8) var(--s6) var(--s6);grid-template-columns:none}
  .ck-moon{margin-top:calc(var(--s8) * -1)}
  .ck{grid-template-columns:32px 72px minmax(0,1fr);column-gap:var(--s4)}
  .ck-glyph{width:72px;height:72px}
  .ck-n{font-size:38px}
}
/* ---- desktop: introduction on the left, the seven on the right ---- */
@media (min-width:1024px){
  /* the Reiki note sits under the lotus, so the two columns end together; the seven span both rows */
  .path-theme.chakras{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto;
    grid-template-areas:"intro list" "reiki list";gap:var(--s5) var(--s7);padding:var(--s8) var(--s7) var(--s7)}
  .path-theme.chakras .path-theme-head{grid-area:intro;position:static;align-self:stretch}
  .ck-body{grid-area:list}
  .ck-reiki{grid-area:reiki;align-self:end}
  .ck-intro{max-width:none;margin:0}
  .ck-lotus{width:100%;max-width:380px;margin-top:auto;padding-top:var(--s5)}
}