/* Opt in on public content pages only; application styles stay independent. */
.public-page {
    --site-ink: #173c36;
    --site-muted: #59665f;
    --site-paper: #faf9f5;
    --site-line: #dce1d8;
    --site-surface: #eef0e7;
    --site-accent: #d8e7ae;
    --site-heading: Georgia, "Times New Roman", serif;
    --primary-blue: var(--site-ink);
    --light-blue: #285348;
    --accent-blue: #647d66;
    --dark-gray: var(--site-ink);
    --medium-gray: var(--site-muted);
    --light-gray: var(--site-surface);
    background: var(--site-paper);
    color: var(--site-ink);
}

.public-page :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid #8a641c;
    outline-offset: 5px;
}

.public-skip {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 1100;
    padding: 12px 20px;
    background: white;
    color: var(--site-ink);
    transform: translateY(-160%);
}

.public-skip:focus { transform: none; }
.public-page [id] { scroll-margin-top: 100px; }
.public-page .main-nav { padding: 22px 5%; background: var(--site-paper); border-bottom: 1px solid var(--site-line); box-shadow: none; }
.public-page .nav-wrapper { max-width: 1280px; gap: 30px; }
.public-page .logo { display: inline-flex; align-items: center; color: var(--site-ink); font-size: 19px; white-space: nowrap; letter-spacing: -0.6px; }
.public-page .nav-menu { gap: 20px; }
.public-page .nav-item { padding: 8px 0; color: var(--site-muted); font-size: 13px; }
.public-page .nav-item:hover,
.public-page .nav-item.active { color: var(--site-ink); border-bottom-color: var(--site-ink); }
.public-page .contact-btn { padding: 11px 22px; background: var(--site-ink); border-radius: 4px; }
.public-page .contact-btn:hover { background: #285348; transform: none; }

.public-page .container { max-width: 1280px; padding: 64px 5%; }
.public-page .page-header { text-align: left; margin-bottom: 56px; padding-bottom: 32px; border-bottom: 1px solid var(--site-line); }
.public-page :is(.page-header h1, .hero-name, .training-hero h1) { font: 400 clamp(36px, 5vw, 64px)/1.12 var(--site-heading); letter-spacing: -1.5px; color: var(--site-ink); }
.public-page .summary-text { max-width: 760px; margin: 20px 0 0; font-size: 17px; line-height: 1.85; color: var(--site-muted); }
.public-page .section { margin-bottom: 64px; }
.public-page .section h2 { font: 400 clamp(28px, 3vw, 40px)/1.2 var(--site-heading); letter-spacing: -0.8px; color: var(--site-ink); border: 0; padding-bottom: 0; }
.public-page .section h2::after { content: none; }
.public-page :is(.project-title, .research-card h3, .benefit-card h3, .career-job-title) { color: var(--site-ink); font-weight: 500; }
.public-page :is(.hero, .training-hero) { background: var(--site-surface); color: var(--site-ink); padding: 72px 5%; }
.public-page :is(.hero, .training-hero)::before { content: none; }
.public-page .hero-container { max-width: 1280px; }
.public-page :is(.hero-title, .hero-description, .training-hero-subtitle, .training-hero-description) { color: var(--site-muted); opacity: 1; }
.public-page .hero-credentials { color: #647d66; font-size: 12px; letter-spacing: 2px; }
.public-page .hero-image { border: 1px solid var(--site-line); border-radius: 6px 70px 6px 6px; box-shadow: none; height: 360px; width: 290px; }
.public-page .headshot { height: 100%; object-fit: cover; }
.public-page :is(.hero-btn-primary, .hero-btn-secondary, .training-hero-cta, .btn, .submit-btn, .career-apply-btn, .community-submit-btn, .reg-submit-btn, .training-register-btn) { border-radius: 4px; box-shadow: none; font-size: 14px; }
.public-page :is(.hero-btn-primary, .training-hero-cta, .btn-primary, .btn-large, .submit-btn, .career-apply-btn, .community-submit-btn, .training-register-btn) { background: var(--site-ink); color: white; }
.public-page :is(.hero-btn-secondary, .btn-secondary) { background: transparent; color: var(--site-ink); border: 1px solid var(--site-ink); backdrop-filter: none; }
.public-page :is(.hero-link-btn, .training-hero-cta, .btn, .submit-btn, .career-apply-btn, .community-submit-btn, .training-register-btn):hover { transform: none; box-shadow: none; }
.public-page :is(.hero-btn-primary, .training-hero-cta, .btn-primary, .btn-large, .submit-btn, .career-apply-btn, .community-submit-btn, .training-register-btn):hover { background: #285348; color: white; }
.public-page :is(button, input, select, textarea) { font-family: inherit; }
.public-page :is(input, select, textarea) { accent-color: var(--site-ink); }
.public-page :is(.form-field input, .form-field textarea, .community-form-group input, .community-form-group select, .community-form-group textarea) { border-color: #b7c2b5; border-radius: 4px; }

.public-page :is(.project-card, .research-card, .benefit-card, .pricing-card, .training-feature-card, .training-session-card, .career-job-card, .contact-form-section, .contact-info-section) { background: #fffefa; border: 1px solid var(--site-line); border-radius: 6px; box-shadow: none; }
.public-page :is(.project-card, .research-card, .benefit-card, .pricing-card, .training-feature-card, .training-session-card, .career-job-card):hover { transform: none; box-shadow: none; border-color: #acbca4; }
.public-page :is(.research-section, .cta-section, .sheet-music-cta, .training-format-section, .reg-section, .suggest-topic-section) { background: var(--site-surface); border-radius: 6px; }
.public-page .research-section { padding: 40px; }
.public-page .research-intro { color: var(--site-muted); font-size: 16px; }
.public-page .cta-container :is(h2, p) { color: var(--site-ink); }
.public-page .cta-container p { color: var(--site-muted); }
.public-page :is(.filter-btn, .tag, .career-job-tag) { border-color: var(--site-line); border-radius: 4px; }
.public-page .filter-btn.active { background: var(--site-ink); color: white; }
.public-page :is(.project-icon, .training-feature-icon, .benefit-icon) { font-size: 28px; }
.public-page .project-status { font-size: 11px; }
.public-page :is(.projects-grid, .research-grid, .benefits-grid, .training-features-grid, .training-sessions-grid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.public-page :is(.project-header, .training-session-header) { flex-wrap: wrap; gap: 12px; }
.public-page :is(.contact-page-grid, .community-form-row) > * { min-width: 0; }
.public-page .contact-card-content { min-width: 0; overflow-wrap: anywhere; }
.public-page .contact-card-icon { font-size: 24px; }
.public-page .availability-note { background: var(--site-surface); }

.public-page .training-hero-inner { text-align: left; max-width: 1120px; }
.public-page .training-hero-description { margin-left: 0; }
.public-page .training-hero-badge { background: #e0e6d6; color: var(--site-ink); border-color: var(--site-line); }
.public-page :is(.training-level-badge, .session-date-chip, .training-dataset-note) { background: var(--site-surface); color: var(--site-ink); border-color: #b4c3a5; }
.public-page .level-advanced { background: var(--site-ink); color: white; }
.public-page .teaser-card-top { background: var(--site-paper); }
.public-page .training-registration-section { background: var(--site-ink); }
.public-page .training-registration-section h2 { color: white; }
.public-page .feedback-choice input { accent-color: var(--site-ink); }
.public-page .training-intro-text { text-align: left; margin-left: 0; font-size: 16px; }
.public-page .reg-capacity-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.public-page :is(.reg-cap-card, .reg-form-wrap, .reg-option-body) { min-width: 0; }
.public-page :is(.reg-cap-date, .reg-cap-numbers) { overflow-wrap: anywhere; }
.public-page :is(.reg-option:hover, .reg-option:has(input:checked), .teaser-task-item:hover, .teaser-table tbody tr:hover, .toc-mobile-link:hover) { background: var(--site-surface); }
.public-page .teaser-table thead tr { background: var(--site-ink); }
.public-page :is(.reg-submit-btn:hover:not(:disabled), .community-submit-btn:hover:not(:disabled), .toc-mobile-toggle:hover) { background: #285348; transform: none; }
.public-page :is(.reg-submit-btn:disabled, .community-submit-btn:disabled) { background: #d3ddce; color: #43563e; }

.public-page .footer { margin-top: 0; background: var(--site-surface); color: var(--site-ink); text-align: left; padding: 48px 5% 30px; }
.public-page .footer-content { max-width: 1280px; align-items: stretch; gap: 24px; }
.public-page .footer-links { justify-content: flex-start; gap: 12px 28px; padding: 26px 0; border-top: 1px solid #d5dbce; border-bottom: 1px solid #d5dbce; }
.public-page .footer-links a { color: var(--site-ink); font-size: 12px; opacity: 1; }
.public-page .footer p { font-size: 11px; color: var(--site-muted); opacity: 1; }
.public-page .advisory-link { color: var(--site-ink); background: transparent; border: 1px solid var(--site-line); font-size: 14px; align-self: flex-start; }

@media (min-width: 769px) and (max-width: 1100px) {
    .public-page .nav-menu { gap: 14px; }
    .public-page .nav-wrapper { gap: 16px; }
    .public-page .logo { font-size: 16px; }
    .public-page .nav-item { font-size: 12px; }
    .public-page .contact-btn { padding: 10px 14px; }
}

@media (max-width: 768px) {
    .public-page .main-nav { padding: 18px 6%; }
    .public-page .logo { font-size: 18px; }
    .public-page .nav-toggle { width: 28px; height: 22px; }
    .public-page .nav-toggle span { background: var(--site-ink); }
    .public-page .nav-menu { background: var(--site-paper); gap: 0; padding: 14px 6% 22px; box-shadow: 0 12px 20px #173c3610; }
    .public-page .nav-menu .nav-item { padding: 13px 0; font-size: 14px; }
    .public-page .nav-menu .contact-btn { padding: 12px 18px; background: var(--site-ink); margin-top: 10px; }
    .public-page .container { padding: 40px 6%; }
    .public-page .page-header { margin-bottom: 36px; }
    .public-page .summary-text { font-size: 16px; }
    .public-page .section { margin-bottom: 44px; }
    .public-page :is(.hero, .training-hero) { padding: 48px 6%; }
    .public-page .hero-image { width: 220px; height: 270px; }
    .public-page .hero-description { font-size: 16px; }
    .public-page .research-section { padding: 28px 20px; }
    .public-page .footer { padding: 36px 6% 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .public-page *,
    .public-page *::before,
    .public-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}