/* Monarch Design System v0.8.3.4.1 — reusable compositions. */
.pattern-page-header { max-width: 52rem; padding-block: var(--space-2xl); }
.pattern-page-header .lead { max-width: 46rem; }
.pattern-section { padding-block: var(--space-xl); }
.pattern-cta { margin-block: var(--space-2xl); padding: var(--space-xl); border: 3px solid var(--site-color-accent); border-radius: var(--radius-lg); background: var(--surface-soft); text-align: center; }
.pattern-cta .button-row { justify-content: center; }
.pattern-stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); gap: var(--space-lg); }
.pattern-stat { padding: var(--space-lg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--surface-faint); text-align: center; }
.pattern-stat strong { display: block; font-family: var(--font-heading); font-size: var(--fs-2xl); }
.pattern-timeline { display: grid; gap: var(--space-lg); padding: 0; list-style: none; }
.pattern-timeline li { padding: var(--space-lg); border-inline-start: .35rem solid var(--site-color-primary); background: var(--surface-faint); }
.pattern-disclosure { padding: var(--space-md); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--surface-faint); }
.pattern-disclosure summary { cursor: pointer; font-family: var(--font-heading); font-weight: var(--fw-semibold); }
@media (max-width: 700px) { .pattern-page-header, .pattern-section { padding-block: var(--space-lg); } .pattern-cta { margin-block: var(--space-xl); padding: var(--space-lg); } }


/* v0.8.3 Universal Website shell — composed entirely from shared Monarch tokens. */
.universal-header {
    position: relative;
    z-index: 20;
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border, #d8d8d8);
    background: var(--color-background, #fff);
}
.universal-header__inner {
    min-height: var(--size-18, 4.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg, 1.5rem);
    padding-block: var(--space-sm, .75rem);
}
.universal-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, .75rem);
    color: var(--color-text, #222);
    text-decoration: none;
}
.universal-brand__mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    aspect-ratio: 1;
    border-radius: var(--radius-full, 999px);
    color: var(--color-white, #fff);
    background: var(--color-primary, #6f3fb5);
    font-family: var(--font-family-heading, serif);
    font-weight: var(--font-weight-bold, 700);
}
.universal-brand__group { display: grid; line-height: 1.1; }
.universal-brand__name { font-family: var(--font-family-heading, serif); font-size: var(--font-size-lg, 1.25rem); }
.universal-brand__tagline { margin-top: .2rem; color: var(--color-text-muted, #666); font-size: var(--font-size-xs, .75rem); }
.universal-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs, .5rem) var(--space-md, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
.universal-nav__list a {
    display: inline-block;
    padding-block: var(--space-xs, .5rem);
    color: var(--color-text, #222);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
}
.universal-nav__list a:hover,
.universal-nav__list a[aria-current="page"] { color: var(--color-primary, #6f3fb5); }
.universal-nav__list a[aria-current="page"] { box-shadow: inset 0 -2px 0 currentColor; }
.universal-footer {
    margin-top: var(--space-2xl, 4rem);
    padding-block: var(--space-2xl, 4rem) var(--space-lg, 1.5rem);
    color: var(--color-white, #fff);
    background: var(--color-text, #222);
}
.universal-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr) minmax(12rem, 1fr);
    gap: var(--space-xl, 2rem);
}
.universal-footer h2, .universal-footer p, .universal-footer address { color: inherit; }
.universal-footer a { color: inherit; }
.universal-footer__heading { font-size: var(--font-size-lg, 1.25rem); }
.universal-footer__links { margin: var(--space-sm, .75rem) 0 0; padding: 0; list-style: none; }
.universal-footer__links li + li { margin-top: var(--space-xs, .5rem); }
.universal-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md, 1rem);
    margin-top: var(--space-xl, 2rem);
    padding-top: var(--space-md, 1rem);
    border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
@media (max-width: 52rem) {
    .universal-header__inner, .universal-footer__bottom { align-items: flex-start; flex-direction: column; }
    .universal-footer__grid { grid-template-columns: 1fr; }
    .universal-nav { width: 100%; }
    .universal-nav__list { width: 100%; }
}


/* v0.8.3.4.1: standardized structural systems */
.section { padding-block: var(--space-xl); }
.section--compact { padding-block: var(--space-lg); }
.section--spacious { padding-block: calc(var(--space-xl) * 1.5); }
.label-utility { display:flex; flex-direction:column; align-items:center; text-align:center; }
.label-utility-start { align-items:flex-start; text-align:left; }
.label-utility-center { align-items:center; text-align:center; }
.label-utility-end { align-items:flex-end; text-align:right; }
.hero { padding-block: clamp(3rem, 8vw, 7rem); text-align:center; background:var(--surface-soft); }
.hero__inner { display:grid; gap:var(--space-xl); align-items:center; }
.hero__content { max-width:52rem; margin-inline:auto; }
.hero-left { text-align:left; }
.hero-left .hero__content { margin-inline:0 auto; }
.hero-minimal { padding-block:var(--space-xl); background:transparent; }
.hero-banner { padding-block:var(--space-lg); }
.hero-split { text-align:left; }
.hero-split .hero__inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
.hero-split .hero__content { margin:0; }
.hero__media img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
.hero__media .image-frame img { height:100%; }
.hero__media--inline { max-inline-size:58rem; margin-inline:auto; }
.theme-primary { --hero-accent:var(--site-color-primary); }
.theme-secondary { --hero-accent:var(--site-color-secondary); }
.theme-accent { --hero-accent:var(--site-color-accent); }
.hero[class*="theme-"] { border-block-start:.35rem solid var(--hero-accent); }
.pattern-page-header { padding-block:var(--space-xl); text-align:center; max-width:60rem; margin-inline:auto; }
.pattern-page-header--compact { padding-block:var(--space-lg); }
.pattern-page-header--large { padding-block:clamp(3rem,7vw,6rem); }
/* v0.8.3.7.1: Pattern image media */
.pattern-page-header__media { margin-block-start:var(--space-lg); }
.pattern-page-header__media .image-frame { box-shadow:var(--shadow-md); }
.breadcrumbs ol { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; list-style:none; padding:0; }
.breadcrumbs li+li::before { content:'/'; margin-inline-end:.5rem; opacity:.55; }
.universal-footer--compact .universal-footer__bottom { margin-top:0; }
.social-links { display:flex; gap:var(--space-sm); list-style:none; padding:0; flex-wrap:wrap; }
.pattern-demo { border:1px solid var(--border-color, currentColor); border-radius:var(--radius-lg); overflow:hidden; }
.pattern-demo__meta { padding:var(--space-md); background:var(--surface-soft); }
@media (max-width:48rem){ .hero-split .hero__inner{grid-template-columns:1fr}.hero-split{text-align:center}.hero-split .hero__content{margin-inline:auto}.label-utility-end{align-items:center;text-align:center} }

/* v0.8.3.4.1 footer shares the body/site background. */
.universal-footer,.universal-footer--compact,.universal-footer--default,.universal-footer--extended{background:var(--site-color-background)!important;color:var(--site-color-text)!important;border-block-start:1px solid var(--site-color-stroke)}
