/* Chakra Serenity — front page only. Loaded conditionally by functions.php. */

/* ---------- Hero ---------- */
.cs-hero {
  position: relative;
  padding-block: var(--cs-s9) var(--cs-s8);
  overflow: hidden;
  text-align: center;
}

/* Aurora wash: three wide, very low-opacity radial fields. Reads as light in
   the room rather than as a graphic pasted behind the text. */
.cs-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 0%,  color-mix(in srgb, var(--cs-crown) 22%, transparent) 0%, transparent 72%),
    radial-gradient(52% 48% at 8% 12%,  color-mix(in srgb, var(--cs-throat) 18%, transparent) 0%, transparent 74%),
    radial-gradient(52% 48% at 92% 8%,  color-mix(in srgb, var(--cs-sacral) 15%, transparent) 0%, transparent 74%);
  /* The wash is clipped to the hero's box, so without a mask the rectangle
     edge is plainly visible where the gradients have not yet reached zero.
     Fading the layer itself out at the bottom and sides is what makes it read
     as light in the room rather than as a pasted-on panel. */
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 38%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 0%, #000 38%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.cs-hero > * { position: relative; z-index: 1; }

.cs-hero h1 {
  font-size: var(--cs-fs-display);
  line-height: var(--cs-lh-tight);
  letter-spacing: var(--cs-ls-display);
  max-width: 16ch;
  margin-inline: auto;
}
.cs-hero h1 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--cs-crown), var(--cs-throat) 45%, var(--cs-heart));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.cs-hero-lead {
  margin-top: var(--cs-s5);
  font-size: var(--cs-fs-lead);
  color: var(--cs-ink-soft);
  max-width: 50ch; margin-inline: auto;
  line-height: 1.6;
}

.cs-hero-actions {
  margin-top: var(--cs-s6);
  display: flex; flex-wrap: wrap; gap: var(--cs-s3);
  justify-content: center;
}

.cs-hero-trust {
  margin-top: var(--cs-s6);
  display: flex; flex-wrap: wrap; gap: var(--cs-s3) var(--cs-s6);
  justify-content: center;
  font-size: var(--cs-fs-kicker);
  color: var(--cs-ink-muted);
}
.cs-hero-trust span { display: inline-flex; align-items: center; gap: var(--cs-s2); }

/* ---------- Seven-chakra wheel ----------
   The signature block, and the one place the full spectrum appears together —
   it is the site's subject, stated plainly. */
.cs-wheel {
  display: grid; gap: var(--cs-s3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.cs-wheel-item {
  position: relative;
  display: flex; flex-direction: column; gap: var(--cs-s2);
  padding: var(--cs-s5) var(--cs-s4) var(--cs-s5);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-soft);
  box-shadow: var(--cs-shadow-xs);
  overflow: hidden;
  transition: transform 260ms var(--cs-ease), box-shadow 260ms var(--cs-ease);
}
.cs-wheel-item::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--ch, var(--cs-accent));
}
/* Colour wash rises on hover — the interaction that makes the grid feel alive
   without animating anything expensive. */
.cs-wheel-item::after {
  content: ""; position: absolute; inset: auto 0 0; height: 0;
  background: linear-gradient(180deg, transparent, var(--ch-soft, var(--cs-accent-tint)));
  transition: height 320ms var(--cs-ease-out);
  z-index: 0;
}
.cs-wheel-item:hover { transform: translateY(-5px); box-shadow: var(--cs-shadow-lg); }
.cs-wheel-item:hover::after { height: 100%; }
.cs-wheel-item > * { position: relative; z-index: 1; }

.cs-wheel-sym {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--ch-soft, var(--cs-accent-tint));
  display: grid; place-items: center;
  color: var(--ch, var(--cs-accent));
  font-weight: 700; font-size: var(--cs-fs-micro);
  letter-spacing: 0.04em;
  margin-bottom: var(--cs-s2);
}

.cs-wheel-name { font-family: var(--cs-font-display); font-size: var(--cs-fs-h4); color: var(--cs-ink); line-height: 1.2; }
.cs-wheel-meta { font-size: var(--cs-fs-micro); color: var(--cs-ink-muted); line-height: 1.5; }
.cs-wheel-hz   { font-variant-numeric: tabular-nums; color: var(--ch); font-weight: 600; }

/* ---------- Section heading ---------- */
.cs-sec-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--cs-s4);
  margin-bottom: var(--cs-s6);
}
.cs-sec-head h2 { font-size: var(--cs-fs-h2); letter-spacing: -0.015em; max-width: 22ch; }
.cs-sec-head p  { color: var(--cs-ink-muted); font-size: var(--cs-fs-small); margin-top: var(--cs-s2); max-width: 46ch; }
.cs-sec-head .cs-more { font-size: var(--cs-fs-small); font-weight: 600; color: var(--cs-accent); white-space: nowrap; }
.cs-sec-head .cs-more:hover { color: var(--cs-accent-dark); }

/* ---------- Featured (lead) article ---------- */
.cs-lead {
  display: grid; gap: var(--cs-s6);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-soft);
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  box-shadow: var(--cs-shadow-sm);
}
@media (min-width: 52rem) { .cs-lead { grid-template-columns: 1.05fr 1fr; gap: 0; } }

.cs-lead-media { aspect-ratio: 16/11; background: var(--cs-surface-sunk); overflow: hidden; }
.cs-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.cs-lead-body { padding: var(--cs-s6); }
.cs-lead-body h3 { font-size: var(--cs-fs-h2); line-height: 1.22; margin-top: var(--cs-s3); }
.cs-lead-body p { color: var(--cs-ink-muted); margin-top: var(--cs-s4); font-size: var(--cs-fs-small); line-height: 1.65; }

/* ---------- Music band ---------- */
.cs-band {
  position: relative;
  background: var(--cs-night);
  color: var(--cs-on-night);
  border-radius: var(--cs-radius-lg);
  padding: var(--cs-s8) var(--cs-s6);
  text-align: center;
  overflow: hidden;
}
.cs-band::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 20% 100%, color-mix(in srgb, var(--cs-crown) 42%, transparent), transparent 70%),
    radial-gradient(40% 60% at 80% 0%,  color-mix(in srgb, var(--cs-throat) 34%, transparent), transparent 70%);
  pointer-events: none;
}
.cs-band > * { position: relative; z-index: 1; }
.cs-band h2 { color: var(--cs-on-night); font-size: var(--cs-fs-h2); max-width: 20ch; margin-inline: auto; }
.cs-band p  { margin-top: var(--cs-s4); color: color-mix(in srgb, var(--cs-on-night) 72%, transparent); max-width: 52ch; margin-inline: auto; }

.cs-band .cs-btn { margin-top: var(--cs-s6); background: var(--cs-on-night); color: var(--cs-night); }
.cs-band .cs-btn:hover { background: #fff; color: var(--cs-night); }

/* Frequency chips inside the band */
.cs-band-freqs {
  margin-top: var(--cs-s6);
  display: flex; flex-wrap: wrap; gap: var(--cs-s2);
  justify-content: center;
}
.cs-freq-chip {
  display: inline-flex; align-items: center; gap: var(--cs-s2);
  padding: 0.35rem 0.8rem;
  border-radius: var(--cs-radius-pill);
  background: color-mix(in srgb, var(--cs-on-night) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cs-on-night) 16%, transparent);
  font-size: var(--cs-fs-micro);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--cs-on-night) 86%, transparent);
}
.cs-freq-chip i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ch); display: block; }

/* ---------- Topic tiles ---------- */
.cs-topic {
  display: flex; flex-direction: column; gap: var(--cs-s2);
  padding: var(--cs-s5);
  border-radius: var(--cs-radius);
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-soft);
  transition: transform var(--cs-transition), box-shadow var(--cs-transition), border-color var(--cs-transition);
}
.cs-topic:hover { transform: translateY(-3px); box-shadow: var(--cs-shadow); border-color: var(--ch, var(--cs-accent)); }
.cs-topic-name { font-family: var(--cs-font-display); font-size: var(--cs-fs-h4); color: var(--cs-ink); }
.cs-topic-count { font-size: var(--cs-fs-micro); color: var(--cs-ink-faint); }