/* Registration Landing — page-specific layout */

/* Hero */
.hero { padding-block: clamp(3.4rem, 7vw, 6rem); }
.hero-inner { max-width: 1000px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.hero .hero-headline { margin: 1.2rem 0 0.6rem; font-size: clamp(2.3rem, 4.7vw, 3.75rem); line-height: 1.05; }
.hero-accent {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.7vw, 1.95rem); color: var(--tertiary);
  max-width: 30ch; margin: 0 auto 1.5rem; line-height: 1.22; text-wrap: balance;
}
.hero .lead { max-width: 58ch; color: var(--cream-70); }
.hero .hl { color: var(--primary); font-weight: 600; white-space: nowrap; }
.hero-cta { margin: 2rem 0 1.6rem; }
.hero-details { color: var(--cream-70); }

/* Glanceable band pulled up slightly under the hero */
.glance { margin-top: calc(-1 * clamp(1.5rem, 4vw, 3rem)); position: relative; z-index: 3; }

/* Section head spacing */
.sec-head { margin-bottom: clamp(2rem, 5vw, 3.4rem); }

/* Teaching */
.teaching .insight { max-width: 880px; margin: 0 auto 2rem; position: relative; }
.teaching .insight-mark { color: var(--primary); position: absolute; top: 1.4rem; left: 1.4rem; font-size: .8rem; }
.teaching .insight p { padding-left: 1.6rem; }
.teaching .insight.quote { text-align: center; }
.teaching .insight.quote p { padding-left: 0; }
.teaching .sig {
  font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--secondary); line-height: 1.3; margin-bottom: 1rem; text-wrap: balance;
}

.shifts { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin: 0 auto 2.2rem; }
@media (min-width: 820px) { .shifts { grid-template-columns: repeat(3, 1fr); } }
.shift { position: relative; text-align: center; padding-top: 2.6rem; }
.shift-num {
  font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 600; color: var(--tertiary);
  display: block; line-height: 1; margin-bottom: .5rem;
}
.shift .card-headline { color: var(--secondary); margin-bottom: .7rem; }
.shift p { color: var(--ink-60); font-size: var(--fs-body); }

/* Mid CTA nested inside teaching */
.mid-cta { margin: 3rem auto 0; }
.mid-cta .section-headline { color: var(--secondary); margin-bottom: 1rem; }
.mid-cta .cta { margin-top: 1.8rem; }

/* Before / After */
.ba-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; max-width: 1000px; margin: 0 auto; }
@media (min-width: 800px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba-title { font-size: var(--fs-h3); margin-bottom: 1.2rem; }
.ba-col.before { background: #fff; }
.ba-col.before .ba-title { color: var(--ink-60); }
.ba-col.after { background: linear-gradient(180deg, #fff, #fbf6ea); border-color: rgba(181,135,42,0.3); }
.ba-col.after .ba-title { color: var(--secondary); }
.ba-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; }
.ba-list li { position: relative; padding-left: 1.9rem; font-size: var(--fs-body); line-height: 1.55; }
.ba-list li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%;
  background: transparent; border: 2px solid var(--ink-45);
}
.ba-list.check li::before {
  content: "\2713"; width: auto; height: auto; border: 0; top: 0; left: .1rem;
  color: var(--primary); font-weight: 700; font-size: 1rem; line-height: 1.55;
}
.ba-closer {
  font-family: 'Fraunces', serif; font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-style: italic;
  color: var(--secondary); margin: 2.4rem auto; text-wrap: balance;
}

/* Relational equity */
.rel-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .rel-grid { grid-template-columns: 0.9fr 1.1fr; } }
.rel-photo { order: 2; }
.rel-body { order: 1; }
@media (min-width: 860px) { .rel-photo { order: 1; } .rel-body { order: 2; } }
.photo-ph {
  aspect-ratio: 4/5; border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(231,210,160,0.35), transparent 60%),
    linear-gradient(160deg, var(--secondary), var(--navy-3));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 2rem; color: var(--cream); text-align: center; border: 1px solid var(--hairline);
}
.photo-ph span { font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 600; }
.photo-ph small { color: var(--cream-70); letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; margin-top: .3rem; }
.rel-tag { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.15rem; color: var(--gold-deep); margin: .3rem 0 1.3rem; }
.rel-body p { color: var(--ink-60); }
.rel-body p strong { color: var(--ink); }

/* Final */
.final-details { margin-top: 1.8rem; color: var(--cream-70); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(14,27,46,0.7); backdrop-filter: blur(3px); }
.modal-panel {
  position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: var(--bg); border-radius: var(--r-lg); padding: clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-lift); border-top: 4px solid var(--primary);
  animation: rise .35s cubic-bezier(0.22,1,0.36,1);
}
.modal-close { position: absolute; top: .7rem; right: .9rem; background: none; border: 0; font-size: 1.8rem; line-height: 1; color: var(--ink-45); }
.modal-close:hover { color: var(--ink); }
.modal-title { font-size: 1.7rem; color: var(--secondary); }
.modal-sub { color: var(--ink-60); font-size: var(--fs-sm); margin: .4rem 0 1.4rem; }
.modal .cta { margin-top: .5rem; }