/*
 * Zohar Yoga — palette + type, tuned to the live site (zohar.yoga): a calm, cool
 * canvas with a muted dusty teal-blue accent and a clean sans with light-weight
 * headings. Loaded only on zohar (payload isolation); its colour knobs are in
 * tokens.css, which the editor loads too.
 *
 * Dark is zohar's default scheme (Site#default_color_scheme); the toggle still
 * offers a light variant, which recomputes from these same knobs. Because the
 * base light/dark blocks reference these hues via var(), overriding the knobs
 * here retints *both* modes at once.
 */

:root {
  --header-height: 4.25rem; /* slim sticky masthead; the home hero sits behind it */
  --post-card-ratio: 4 / 3; /* most featured images are portrait posters */
  --page-measure: 46rem;    /* zohar's pages are articles, read like posts */
}

@media (min-width: 48rem) {
  :root { --post-text-size: 1.125rem; --page-text-size: 1.125rem; }
}

@layer base {
  /* Light-weight headings, near-white on the dark canvas — the site's signature.
     (Live zohar.yoga renders headings at weight 400.) */
  h1, h2, h3, h4 { font-weight: 400; }
}

@layer components {
  /* Footer nav links parted by a soft middot rather than a hard rule — inherits the
     footer's muted tone. Even spacing on both sides of the dot (gap before, margin after). */
  .site-footer__nav .menu--footer { gap: var(--inline-space); }
  .site-footer__nav .menu--footer > .menu__item:not(:first-child)::before {
    content: "·";
    margin-inline-end: var(--inline-space);
    opacity: 0.6;
  }
}


@layer components {
  /* A page reads as sections: each heading after the first gets room above it and a short brand
     rule, so the break shows even at zohar's light heading weight. */
  .page .lexxy-content > h2:not(:first-child) {
    margin-block-start: var(--block-space-triple);
    font-size: var(--text-x-large);
    &::before {
      content: "";
      display: block;
      inline-size: 2.5rem;
      block-size: 2px;
      margin-block-end: 0.9rem;
      background: var(--color-brand);
    }
  }
}