/* choirocore.com page layout — externalized for the strict CSP;
   consumes the token bridge only. Nothing here
   redefines a brand token or component; it composes sections from
   the same --ch-* variables. */

    /* choirocore.com page layout — consumes the token bridge only. Nothing
       here redefines a brand token or component; it composes sections from
       the same --ch-* variables. */
    .ch-nav__item { position: relative; } /* anchor each dropdown panel to its own trigger */
    html { scroll-behavior: smooth; }
    #main:focus { outline: none; }

    .ch-container {
      max-width: var(--ch-container-max);
      margin-inline: auto;
      padding-inline: var(--ch-container-gutter);
    }

    /* Hero */
    .ch-hero {
      border-bottom: 1px solid var(--ch-color-border-default);
    }
    .ch-hero__inner {
      padding-block: var(--ch-space-16) var(--ch-space-20);
    }
    @media (min-width: 768px) {
      .ch-hero__inner { padding-block: var(--ch-space-20) var(--ch-space-24); }
    }
    .ch-hero__title {
      margin: var(--ch-space-6) 0 0;
      max-width: 20ch;
      font-size: var(--ch-text-4xl);
      line-height: var(--ch-text-4xl--line-height);
      font-weight: var(--ch-font-weight-bold);
      letter-spacing: var(--ch-tracking-tight);
    }
    @media (min-width: 768px) {
      .ch-hero__title {
        font-size: var(--ch-text-5xl);
        line-height: var(--ch-text-5xl--line-height);
      }
    }
    .ch-hero__title .accent { color: var(--ch-color-accent-fg); }
    .ch-hero__lede {
      margin: var(--ch-space-5) 0 0;
      max-width: 62ch;
      font-size: var(--ch-text-lg);
      line-height: var(--ch-text-lg--line-height);
      color: var(--ch-color-fg-secondary);
    }
    .ch-hero__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--ch-space-3);
      margin-top: var(--ch-space-8);
    }

    /* Sections */
    .ch-section { padding-block: var(--ch-space-20); }
    .ch-section--muted { background: var(--ch-color-bg-subtle); }
    .ch-kicker {
      display: flex;
      align-items: center;
      gap: var(--ch-space-2);
      margin: 0;
      font-size: var(--ch-text-xs);
      line-height: var(--ch-text-xs--line-height);
      font-weight: var(--ch-font-weight-semibold);
      text-transform: uppercase;
      letter-spacing: var(--ch-tracking-caps);
      color: var(--ch-color-accent-fg);
    }
    .ch-kicker::before {
      content: "";
      display: block;
      width: var(--ch-space-5);
      height: 1px;
      flex-shrink: 0;
      background: var(--ch-color-accent-primary);
    }
    .ch-section__title {
      margin: var(--ch-space-4) 0 0;
      font-size: var(--ch-text-3xl);
      line-height: var(--ch-text-3xl--line-height);
      font-weight: var(--ch-font-weight-semibold);
      letter-spacing: var(--ch-tracking-tight);
    }
    @media (min-width: 768px) {
      .ch-section__title {
        font-size: var(--ch-text-4xl);
        line-height: var(--ch-text-4xl--line-height);
      }
    }
    .ch-section__lede {
      margin: var(--ch-space-4) 0 0;
      max-width: 65ch;
      color: var(--ch-color-fg-secondary);
    }
    .ch-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--ch-space-4);
      margin-top: var(--ch-space-10);
    }
    @media (min-width: 768px) {
      .ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .ch-card > p {
      margin: var(--ch-space-3) 0 0;
      color: var(--ch-color-fg-secondary);
    }

    /* Ecosystem cards */
    a.ch-card { text-decoration: none; }
    a.ch-card:hover {
      border-color: var(--ch-color-accent-primary);
      box-shadow: var(--ch-shadow-2);
    }
    a.ch-card:hover .ch-card__title { color: var(--ch-color-accent-fg); }
    .ch-card--current {
      border-color: var(--ch-color-accent-primary);
      background: var(--ch-color-accent-subtle);
    }
    .ch-card__meta { margin-top: var(--ch-space-4); }
    .ch-eco__note {
      margin: var(--ch-space-8) 0 0;
      max-width: 65ch;
      color: var(--ch-color-fg-secondary);
    }

    /* Compact nav panel groups reuse the footer link rhythm */
    .ch-nav__mobile .ch-nav__caps { margin-top: var(--ch-space-4); }
    .ch-nav__mobile .ch-nav__caps:first-child { margin-top: 0; }

    /* Header CTA switchpoint: the desktop bar needs ≈900px; below lg the compact
       structure + Menu own the header — showing the CTA earlier wrapped it into
       three lines. */
    .ch-header .ch-cta--md { display: none; }
    @media (min-width: 1024px) {
      .ch-header .ch-cta--md { display: inline-flex; }
    }

.ch-u-flex1 { flex-grow: 1; }