/* ============================================================================
   Saint Andrew's Conservatory — "Marble Hall" skin (Conservatory Phase 2).
   Loaded ONLY by the conservatory app via site.Config.ExtraStylesheets, after
   the five shared design-system files — never edit those in place (nginx
   serves /static/ with 1y-immutable caching, so per-app skins live at their
   own paths). Every color/shadow/font token not defined here comes from the
   shared base.css :root. Print rules live in the trailing @media print block.
   ============================================================================ */

:root {
  /* Ivory-marble surface family (the only new color values in the design) */
  --surface-ivory-bright: #fdfbf7;
  --surface-ivory: #faf8f4;
  --surface-ivory-soft: #f8f5f0;
  --surface-parchment: #f4efe6;
  --surface-parchment-deep: #f1ebe1;
  --surface-parchment-shadow: #ede6db;
  --wash-antique-gold: rgba(201, 162, 74, 0.08);
  --wash-antique-gold-faint: rgba(201, 162, 74, 0.06);
  --cons-header-bg: rgba(251, 249, 245, 0.94);

  /* Gradient composites */
  --grad-ivory: linear-gradient(155deg, var(--surface-ivory-soft), var(--surface-parchment-deep));
  --grad-parchment: linear-gradient(180deg, var(--surface-parchment), var(--surface-ivory-soft));
  --grad-frame-mat: linear-gradient(var(--surface-ivory-bright), var(--surface-parchment-deep));
  /* Promoted from the church .hero__panel--content radial (components.css) */
  --grad-radial-crimson: radial-gradient(
    circle at 50% -10%,
    var(--color-primary-light),
    var(--color-primary) 45%,
    var(--color-primary-dark)
  );
  --grad-crimson-tile: linear-gradient(140deg, var(--color-primary), var(--color-primary-dark));
}

/* Scroll reveals — hidden ONLY when JS has announced itself (html.js-reveal)
   and motion is allowed; no-JS, reduced-motion, and print all see everything. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition:
      opacity 0.8s cubic-bezier(0.22, 0.7, 0.2, 1),
      transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
  }
  .js-reveal [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Utility bar */
.cons-utility-bar {
  background-color: var(--color-primary-dark);
  color: var(--color-gold-pale);
  text-align: center;
  padding: 8px var(--space-lg);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Sticky blur header */
.cons-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--cons-header-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-gold-soft);
}

.cons-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-md) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.cons-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  fill: var(--color-secondary); /* tints the inline arch SVG */
}

.cons-wordmark {
  line-height: 1.05;
}

.cons-wordmark__super,
.cons-wordmark__main {
  display: block;
  font-family: var(--font-family-brand);
  text-transform: uppercase;
}

.cons-wordmark__super {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  color: var(--color-primary);
}

.cons-wordmark__main {
  font-size: 17px;
  letter-spacing: 0.15em;
  color: var(--color-gray-900);
  margin-top: 3px;
}

/* Header nav (desktop) */
.cons-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.cons-nav__link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--color-gray-700);
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: var(--space-sm) 13px;
  border-bottom: 2px solid transparent;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.cons-nav__link:hover {
  color: var(--color-primary);
}

.cons-nav__link[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-secondary);
}

.cons-nav__cta {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  padding: 11px 22px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.cons-nav__cta:hover {
  background-color: var(--color-primary-light);
}

/* The shared .nav-toggle bars are white (crimson church header) — the
   conservatory header is ivory, so the hamburger needs dark bars. */
.cons-header .nav-toggle__bar {
  background-color: var(--color-gray-800);
}

/* Buttons — conservatory variants over the shared .btn base */
.btn--outline-gold {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary-dark);
}

.btn--outline-gold:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
  text-decoration: none;
}

.btn--gold {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn--gold:hover {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: var(--color-white);
  text-decoration: none;
}

.btn--light {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary-dark);
}

.btn--light:hover {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  text-decoration: none;
}

/* Page-header band — radial crimson, inset gold frame, arch glyph.
   (Unlike the church .page-header: gradient ground, no photo/overlay,
   eyebrow ABOVE the title.) */
.cons-page-header {
  position: relative;
  padding: 76px var(--space-lg);
  text-align: center;
  background: var(--grad-radial-crimson);
  color: var(--color-white);
  overflow: hidden;
}

.cons-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  outline: 1px solid var(--frame-gold-soft);
  outline-offset: -14px;
  pointer-events: none;
}

.cons-page-header__arch {
  display: inline-block;
  width: 20px;
  height: 40px;
  background-color: var(--color-gold-pale);
  -webkit-mask: var(--arch-svg) center / contain no-repeat;
  mask: var(--arch-svg) center / contain no-repeat;
  margin-bottom: 18px;
}

.cons-page-header__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  margin-bottom: 12px;
}

.cons-page-header__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-white);
  margin: 0 0 12px;
}

.cons-page-header__subtitle {
  font-family: var(--font-family);
  font-size: 19px;
  font-style: italic;
  color: var(--color-white-85);
  max-width: 52ch;
  margin: 0 auto;
}

/* Section scaffolding */
.cons-section {
  padding: 84px 0;
}

.cons-section--tight {
  padding-top: var(--space-lg);
}

.cons-section--flush-bottom {
  padding-bottom: var(--space-2xl);
}

.cons-section--white {
  background-color: var(--color-white);
}

.cons-section--ivory {
  background: var(--grad-ivory);
}

.cons-section--parchment {
  background:
    radial-gradient(120% 80% at 88% 6%, var(--wash-antique-gold-faint), transparent 55%),
    var(--grad-parchment);
}

.cons-section-head {
  text-align: center;
  margin-bottom: 40px;
}

.cons-section-title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 40px;
  line-height: 1.14;
  color: var(--color-gray-900);
  margin: 0;
}

.cons-section-title--left {
  text-align: left;
  font-size: 38px;
  margin-bottom: var(--space-lg);
}

.cons-section-sub {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-gray-600);
  margin: -28px 0 40px;
}

.cons-lede-block {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}

.cons-lede {
  font-family: var(--font-family);
  font-size: 21px;
  line-height: 1.72;
  color: var(--color-gray-700);
  margin-top: var(--space-lg);
}

.cons-lede--sm {
  font-size: 20px;
  line-height: 1.65;
  color: var(--color-gray-600);
}

.cons-lede__mark {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.cons-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--color-gray-700);
  margin-bottom: var(--space-md);
}

.cons-body--muted {
  color: var(--color-gray-600);
}

.cons-h3 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 28px;
  color: var(--color-gray-900);
  margin: 0 0 var(--space-md);
}

.cons-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: var(--space-xl);
}

.cons-actions--center {
  justify-content: center;
}

.cons-split-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.cons-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1120px;
  margin-inline: auto;
}

.cons-split-grid--top {
  align-items: start;
  margin-bottom: 44px;
}

.cons-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: 28px;
}

.cons-group-head__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 28px;
  color: var(--color-primary);
  margin: 0;
  white-space: nowrap;
}

.cons-group-head__rule {
  flex: 1;
  height: 1px;
  background-color: var(--color-gold-soft);
}

.cons-more-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  color: var(--color-primary);
  text-decoration: none;
}

.cons-more-link:hover {
  color: var(--color-primary-light);
}

.cons-footnote {
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-gray-500);
  margin: 32px 0 0;
}

.cons-list-head {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 26px;
  color: var(--color-gray-900);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-secondary);
}

.cons-eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.cons-eyebrow-rule__dash {
  width: 34px;
  height: 1px;
  background-color: var(--color-secondary);
}

.cons-eyebrow-rule__text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
}

/* Quotes + signature */
.cons-quote {
  border-left: 3px solid var(--color-secondary);
  padding: 6px 0 6px 26px;
  margin: 0 0 26px;
  font-family: var(--font-family);
  font-style: italic;
  font-size: 26px;
  line-height: 1.5;
  color: var(--color-gray-700);
}

.cons-quote__cite {
  display: block;
  font-style: normal;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin-top: 14px;
}

.cons-pullquote {
  font-family: var(--font-family);
  font-style: italic;
  font-size: 29px;
  line-height: 1.5;
  color: var(--color-gray-800);
  margin: 0 0 22px;
}

.cons-signature {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--space-lg);
}

.cons-signature__rule {
  width: 30px;
  height: 1px;
  background-color: var(--color-gray-400);
}

.cons-signature__name {
  font-family: var(--font-family);
  font-style: italic;
  font-size: 20px;
  color: var(--color-gray-900);
}

.cons-signature__role {
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-top: 2px;
}

/* Hero (homepage) */
.cons-hero {
  padding: 74px 0 84px;
  background:
    radial-gradient(130% 90% at 12% 8%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 120% at 92% 18%, var(--wash-antique-gold), rgba(201, 162, 74, 0) 52%),
    linear-gradient(155deg, var(--surface-ivory-soft), var(--surface-parchment-deep) 55%, var(--surface-parchment-shadow));
}

.cons-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

.cons-hero__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: var(--color-gray-900);
  margin: 0 0 22px;
}

.cons-hero__lede {
  font-family: var(--font-family);
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-gray-600);
  max-width: 30ch;
  margin: 0 0 34px;
}

.cons-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cons-hero__meta {
  margin-top: 30px;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-gray-500);
}

/* Arched figure frames */
.arch-frame {
  position: relative;
  background: var(--grad-frame-mat);
  border: 1px solid var(--color-gold-soft);
}

.arch-frame--hero {
  padding: 10px;
  border-radius: 290px 290px 12px 12px;
  box-shadow: var(--shadow-warm-figure);
}

.arch-frame--hero .arch-frame__window {
  border-radius: 282px 282px 6px 6px;
  height: 520px;
}

.arch-frame--portrait {
  padding: 8px;
  border-radius: 220px 220px 8px 8px;
  box-shadow: var(--shadow-warm-sm);
}

.arch-frame--portrait .arch-frame__window {
  border-radius: 214px 214px 4px 4px;
  height: 300px;
}

.arch-frame__window {
  overflow: hidden;
}

.arch-frame__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch-frame__keystone {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 30px;
  background-color: var(--color-secondary);
  -webkit-mask: var(--arch-svg) center / contain no-repeat;
  mask: var(--arch-svg) center / contain no-repeat;
}

/* Figure placeholder (until Phase-3 photography) */
.figure-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background: var(--grad-frame-mat);
}

.figure-slot__arch {
  width: 18px;
  height: 36px;
  background-color: var(--color-gold-soft);
  -webkit-mask: var(--arch-svg) center / contain no-repeat;
  mask: var(--arch-svg) center / contain no-repeat;
}

.figure-slot__label {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  text-align: center;
  padding: 0 var(--space-md);
}

.cons-figure-mat {
  padding: 9px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gold-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm-figure);
}

.cons-figure-mat .figure-slot {
  height: 400px;
  border-radius: var(--radius-sm);
}

.cons-map-frame {
  max-width: 1080px;
  margin-inline: auto;
  height: 340px;
  border: 1px solid var(--color-gold-soft);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-warm-sm);
}

/* Stat band */
.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 940px;
  margin: 56px auto 0;
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
}

.stat-band__item {
  text-align: center;
  padding: 30px var(--space-md);
  border-right: 1px solid var(--color-gray-200);
}

.stat-band__item:last-child {
  border-right: none;
}

.stat-band__value {
  font-family: var(--font-family);
  font-size: 46px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: 1;
}

.stat-band__label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-top: 10px;
}

/* Studio cards (home preview grid) */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.studio-card {
  display: block;
  text-decoration: none;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.studio-card__name {
  font-family: var(--font-family);
  font-size: 25px;
  color: var(--color-gray-900);
}

.studio-card__name--light {
  font-size: 22px;
  color: var(--color-white);
}

.studio-card__note {
  font-size: 12.5px;
  color: var(--color-gray-500);
  margin-top: 6px;
}

.studio-card__note--audition {
  color: var(--color-secondary-dark);
}

.studio-card__note--gold {
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.03em;
  color: var(--color-gold-pale);
}

.studio-card--feature {
  background: var(--grad-crimson-tile);
  border: 1px solid var(--color-primary-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  grid-column: span 2;
}

/* Portrait preview cards (home faculty section) */
.portrait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin-inline: auto;
}

.portrait-card {
  display: block;
  text-decoration: none;
  text-align: center;
}

.portrait-card__name {
  font-family: var(--font-family);
  font-size: 22px;
  color: var(--color-gray-900);
  margin-top: 20px;
}

.portrait-card__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin-top: 6px;
}

/* Faculty cards (faculty page) */
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.faculty-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  overflow: hidden;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.faculty-card__photo {
  height: 280px;
  background: var(--grad-crimson-tile);
}

.faculty-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faculty-card__photo .figure-slot {
  background: transparent;
  min-height: 0;
}

.faculty-card__photo .figure-slot__arch {
  background-color: var(--color-gold-pale);
}

.faculty-card__photo .figure-slot__label {
  color: var(--color-white-85);
}

.faculty-card__body {
  padding: 22px 24px;
}

.faculty-card__name {
  font-family: var(--font-family);
  font-size: 23px;
  color: var(--color-gray-900);
}

.faculty-card__eyebrow {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 7px 0 12px;
}

.faculty-card__blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}

/* The blurb is sanitized rich text (faculty bio) — keep nested paragraph
   spacing tight inside the card. */
.faculty-card__blurb p {
  margin: 0 0 10px;
}

.faculty-card__blurb p:last-child {
  margin-bottom: 0;
}

/* Studio selector (areas of study) */
.studio-selector {
  display: grid;
  grid-template-columns: 300px 1fr;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-warm-sm);
  max-width: 1120px;
  margin-inline: auto;
}

.studio-selector__list {
  grid-row: 1 / span 6;
  border-right: 1px solid var(--color-gray-200);
  padding: 10px 0;
}

.studio-selector__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  padding: 14px 26px;
  font-family: var(--font-family);
  font-size: 20px;
  color: var(--color-gray-500);
  cursor: pointer;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.studio-selector__item--active {
  color: var(--color-gray-900);
  border-left-color: var(--color-secondary);
  background: linear-gradient(90deg, rgba(184, 134, 11, 0.09), transparent);
}

.studio-selector__detail {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}

.studio-selector__text {
  padding: 40px 40px 36px;
}

.studio-selector__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  border: 1px solid rgba(184, 134, 11, 0.4);
  border-radius: 20px;
  padding: 5px 13px;
  margin-bottom: 20px;
}

.studio-selector__tag--audition {
  color: var(--color-primary);
  border-color: var(--color-primary-tint);
}

.studio-selector__name {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 34px;
  color: var(--color-gray-900);
  margin: 0 0 14px;
}

.studio-selector__blurb {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--color-gray-600);
  margin: 0 0 26px;
}

.studio-selector__media {
  min-height: 340px;
  border-left: 1px solid var(--color-gray-200);
}

/* Step grids (roman numerals + numbered badges) */
.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  max-width: 1120px;
  margin-inline: auto;
}

.step {
  text-align: center;
}

.step__numeral {
  font-family: var(--font-family);
  font-size: 40px;
  color: var(--color-secondary);
  margin-bottom: 12px;
}

.step__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--grad-crimson-tile);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: 22px;
  margin: 0 auto 18px;
}

.step__title {
  font-family: var(--font-family);
  font-size: 21px;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

.step__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}

/* Feature cards (summer academy) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.feature-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 30px 26px;
}

.feature-card__title {
  font-family: var(--font-family);
  font-size: 23px;
  color: var(--color-gray-900);
  margin-bottom: 10px;
}

.feature-card__body {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-gray-600);
  margin: 0;
}

/* Term cards (schedule) */
.term-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.term-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  padding: 32px 30px;
  box-shadow: var(--shadow-warm-sm);
}

.term-card__name {
  font-family: var(--font-family);
  font-size: 26px;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.term-card__span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: 18px;
}

.term-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray-600);
  margin: 0 0 var(--space-md);
}

.term-card__date {
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

/* Key dates (schedule) */
.key-dates__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 15px 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.key-dates__row:last-child {
  border-bottom: none;
}

.key-dates__label {
  font-size: 15.5px;
  color: var(--color-gray-700);
}

.key-dates__date {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary-dark);
  white-space: nowrap;
}

.perf-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.perf-list .event-card {
  cursor: default;
}

/* Tuition tier cards (registration) */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1000px;
  margin-inline: auto;
}

.tier-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 10px;
  padding: 34px 30px;
  text-align: center;
  box-shadow: var(--shadow-warm-sm);
}

.tier-card--featured {
  border-color: var(--color-gold-soft);
  border-top: 3px solid var(--color-secondary);
  box-shadow: var(--shadow-warm-lg);
}

.tier-card__minutes {
  font-family: var(--font-family);
  font-size: 40px;
  color: var(--color-primary);
  line-height: 1;
}

.tier-card__unit {
  font-size: 18px;
  color: var(--color-gray-500);
}

.tier-card__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin: 14px 0;
}

.tier-card__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-gray-600);
  margin: 0;
}

/* Contact */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-info__label {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin-bottom: 6px;
}

.contact-info__value {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-gray-700);
}

.contact-info__link {
  color: var(--color-primary);
  text-decoration: none;
}

.contact-info__link:hover {
  color: var(--color-primary-light);
  text-decoration: underline;
}

.contact-card {
  background: linear-gradient(155deg, var(--surface-ivory), var(--surface-parchment));
  border: 1px solid var(--color-gray-200);
  border-top: 3px solid var(--color-secondary);
  border-radius: 10px;
  padding: 38px;
  text-align: center;
  box-shadow: var(--shadow-warm-sm);
}

.contact-card__title {
  font-family: var(--font-family);
  font-size: 24px;
  color: var(--color-gray-900);
  margin-bottom: var(--space-sm);
}

.contact-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-gray-600);
  margin: 0 0 22px;
}

.contact-card__note {
  font-size: 13px;
  font-style: italic;
  color: var(--color-gray-500);
  margin: 18px 0 0;
}

/* Dean split (home) */
.dean-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: center;
  max-width: 1060px;
  margin-inline: auto;
}

.dean-grid__figure {
  padding: 9px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gold-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm-figure);
}

.dean-grid__figure .figure-slot {
  height: 400px;
  border-radius: var(--radius-sm);
}

/* CTA panels — crimson radial + inset gold frame */
.cta-panel {
  position: relative;
  max-width: 1120px;
  margin-inline: auto;
  background: radial-gradient(
    circle at 18% 20%,
    var(--color-primary-light),
    var(--color-primary) 48%,
    var(--color-primary-dark)
  );
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-warm-lg);
  color: var(--color-white);
}

.cta-panel__frame {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--frame-gold);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.cta-panel__inner {
  position: relative;
  padding: 56px 60px;
  text-align: center;
}

.cta-panel__inner--left {
  text-align: left;
}

.cta-panel__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold-pale);
  margin-bottom: var(--space-md);
}

.cta-panel__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  font-size: 34px;
  line-height: 1.14;
  color: var(--color-white);
  margin: 0 0 14px;
}

.cta-panel__copy {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-white-85);
  max-width: 52ch;
  margin: 0 auto 28px;
}

.cta-panel__inner--left .cta-panel__copy {
  margin-inline: 0;
  max-width: 44ch;
}

.cta-panel__split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: stretch;
}

.cta-panel__media {
  position: relative;
  margin: 12px 12px 12px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Footer */
.cons-footer {
  background-color: var(--color-gray-900);
  color: var(--color-gray-300);
  padding: 64px 0 30px;
  border-top: 4px solid var(--color-secondary);
}

.cons-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--color-gray-700);
}

.cons-footer__affiliation {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  fill: var(--color-white); /* tints the inline arch SVG */
}

.cons-affiliation-wordmark {
  font-family: var(--font-family-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-brand);
  font-size: 19px;
  line-height: 1.1;
  color: var(--color-white);
}

.cons-footer__blurb {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-gray-400);
  margin: 20px 0 0;
  max-width: 36ch;
}

.cons-footer__title {
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  margin: 0 0 var(--space-md);
}

.cons-footer__lines {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-gray-400);
  margin: 0;
}

.cons-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.cons-footer__links a {
  font-size: var(--font-size-sm);
  color: var(--color-gray-300);
  text-decoration: none;
}

.cons-footer__links a:hover {
  color: var(--color-secondary-light);
}

.cons-footer__legal {
  margin-top: 22px;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
  letter-spacing: 0.04em;
}

/* Quiet staff-entry link in the legal line — same gray as its surroundings,
   gold on hover like the footer link columns (DECISIONS #64). */
.cons-footer__login {
  color: var(--color-gray-500);
  text-decoration: none;
}

.cons-footer__login:hover {
  color: var(--color-secondary-light);
}

/* Contact form (Phase 3) — the live message form inside .contact-card and
   its thank-you state. The honeypot field is moved off-screen (never
   display:none — some bots skip invisible fields). */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-card--message {
  position: relative; /* containing block for the off-screen honeypot */
}

/* Enrollment flow (Conservatory Phase 4 — DECISIONS #65). The confirmation
   card reuses the contact-card chrome but stands alone (no split grid), so it
   gets a bounded centered column; the member note carries the gold accent. */
.enroll-confirm {
  max-width: 560px;
  margin: 0 auto;
}

.enroll-member-note {
  color: var(--color-secondary-dark);
}

.enroll-alert {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Staff enrollment records (Conservatory Phase 4 — DECISIONS #65): the
   inline audited status-change control (the church .gift-status-form recipe,
   cloned at a conservatory-owned class — never edit the shared five) and the
   records filter bar + pagination. */
.cons-status-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.cons-status-form .form-select,
.cons-status-form .form-input {
  width: auto;
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-sm);
}

.cons-status-form__note {
  flex: 1 1 8rem;
  min-width: 0;
}

.cons-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}

.cons-filter-bar .form-label {
  margin: 0;
}

.cons-filter-bar .form-select {
  width: auto;
}

.cons-records-totals {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-md);
}

.cons-pagination {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.contact-form .btn {
  margin-top: var(--space-xs);
}

.contact-card__thanks {
  text-align: center;
  padding: var(--space-lg) 0;
}

.contact-card__arch {
  display: inline-block;
  width: 26px;
  height: 44px;
  background-color: var(--color-secondary-dark);
  -webkit-mask: var(--arch-svg) center / contain no-repeat;
  mask: var(--arch-svg) center / contain no-repeat;
  margin-bottom: 12px;
}

/* Staff admin chrome — the light toolbar above the staff CRUD pages
   (cross-surface section links + logout form; Conservatory Phase 3/4 —
   DECISIONS #64/#65; still no sidebar). */
.cons-staff-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--surface-parchment-shadow);
}

.cons-staff-bar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.cons-staff-bar__link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
}

.cons-staff-bar__link[aria-current="page"] {
  font-weight: 700;
  color: var(--color-primary-dark);
  border-bottom: 2px solid var(--color-secondary);
}

.cons-staff-bar__link--public {
  color: var(--color-gray-500);
}

.cons-staff-bar__logout {
  margin: 0;
}

/* Hover lifts — conservatory cards only (the shared hover list in
   components.css names church cards explicitly; never extend it in place). */
.studio-card:hover,
.faculty-card:hover,
.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-warm-lg);
  border-color: var(--color-gold-soft);
}

.studio-card--feature:hover {
  border-color: var(--color-primary-dark);
}

/* Responsive */
@media (max-width: 1024px) {
  .cons-hero__title {
    font-size: 48px;
  }

  .studio-grid,
  .feature-grid,
  .step-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .faculty-grid,
  .term-grid,
  .tier-grid,
  .portrait-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  /* Header collapse — mirrors the church layout.css nav mechanics */
  .cons-header .nav-toggle {
    display: flex;
  }

  .cons-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--surface-ivory-bright);
    border-bottom: 1px solid var(--color-gold-soft);
    max-height: 0;
    overflow: hidden;
    transition:
      max-height var(--transition-base),
      padding var(--transition-base);
  }

  .cons-nav--open {
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: var(--space-md) 0;
  }

  .cons-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .cons-nav__link {
    display: block;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-base);
    border-bottom: none;
    border-left: 3px solid transparent;
  }

  .cons-nav__link[aria-current="page"] {
    border-left-color: var(--color-secondary);
  }

  .cons-nav__cta {
    display: block;
    margin: var(--space-sm) var(--space-lg) 0;
    text-align: center;
  }

  .cons-section {
    padding: 56px 0;
  }

  .cons-hero {
    padding: 48px 0 56px;
  }

  .cons-hero__grid,
  .cons-split-grid,
  .dean-grid,
  .cta-panel__split-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .cons-hero__title {
    font-size: 40px;
  }

  .cons-section-title {
    font-size: 32px;
  }

  .cons-page-header__title {
    font-size: 36px;
  }

  .arch-frame--hero .arch-frame__window {
    height: 360px;
  }

  .stat-band {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-band__item {
    border-bottom: 1px solid var(--color-gray-200);
  }

  .stat-band__item:nth-child(even) {
    border-right: none;
  }

  .stat-band__item:nth-child(n + 3) {
    border-bottom: none;
  }

  .studio-grid,
  .feature-grid,
  .step-grid,
  .faculty-grid,
  .term-grid,
  .tier-grid,
  .portrait-grid {
    grid-template-columns: 1fr;
  }

  .studio-card--feature {
    grid-column: auto;
  }

  .studio-selector {
    grid-template-columns: 1fr;
  }

  .studio-selector__list {
    grid-row: auto;
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200);
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-sm);
  }

  .studio-selector__item {
    width: auto;
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
    border-left: none;
    border-bottom: 3px solid transparent;
  }

  .studio-selector__item--active {
    border-left: none;
    border-bottom-color: var(--color-secondary);
  }

  .studio-selector__detail {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .studio-selector__media {
    border-left: none;
    border-top: 1px solid var(--color-gray-200);
    min-height: 240px;
  }

  .cta-panel__inner {
    padding: 40px 28px;
  }

  .cta-panel__media {
    margin: 0 12px 12px;
    min-height: 220px;
  }

  .cons-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Print — the conservatory chrome is selector-new, so the shared print.css
   does not cover it (it is selector-name-coupled). */
@media print {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cons-utility-bar,
  .cons-header,
  .cons-footer,
  .cta-panel,
  .cons-map-frame,
  .cons-hero__actions,
  .cons-actions {
    display: none;
  }

  .cons-hero,
  .cons-section--ivory,
  .cons-section--parchment {
    background: none;
  }

  .cons-page-header {
    background: none;
    color: var(--color-gray-900);
    padding: var(--space-lg) 0;
  }

  .cons-page-header::after,
  .cons-page-header__arch {
    display: none;
  }

  .cons-page-header__title,
  .cons-page-header__subtitle {
    color: var(--color-gray-900);
  }

  .cons-page-header__eyebrow {
    color: var(--color-gray-700);
  }

  .studio-card,
  .faculty-card,
  .term-card,
  .tier-card,
  .feature-card,
  .contact-card {
    break-inside: avoid;
    box-shadow: none;
    border-color: var(--color-gray-400);
  }

  .studio-card--feature {
    background: none;
  }

  .studio-card--feature .studio-card__name--light,
  .studio-card--feature .studio-card__note--gold {
    color: var(--color-gray-900);
  }

  .faculty-card__photo,
  .figure-slot,
  .arch-frame {
    display: none;
  }

  .stat-band__value {
    color: var(--color-gray-900);
  }
}