/* Shared landing-page surfaces echo the cinematic hero in both themes. */
:root {
    --page-surface: #f8fafc;
    --page-alternate: #f0f6f9;
    --card-surface: rgba(255, 255, 255, .92);
    --card-edge: rgba(0, 112, 152, .16);
    --card-shadow: 0 12px 36px rgba(0, 42, 59, .06);
    --heading-color: #0f172a;
    --muted-color: #526477;
    --link-color: #007098;
}
.dark {
    --page-surface: #0f172a;
    --page-alternate: #101b2d;
    --card-surface: rgba(19, 32, 51, .94);
    --card-edge: rgba(98, 199, 218, .17);
    --card-shadow: 0 18px 48px rgba(2, 6, 23, .3);
    --heading-color: #f1f5f9;
    --muted-color: #b0bed0;
    --link-color: #62c7da;
}
body { background-color: var(--page-surface); }
/* Theme-specific artwork keeps both hero scenes colorful and clearly visible. */
.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 20% 45%, #62c7da1a, transparent 65%),
                radial-gradient(ellipse at 85% 40%, #c084fc1a, transparent 65%), var(--page-surface);
}
.hero-backdrop picture { position: absolute; inset: 0; }
.hero-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; opacity: 1; }
.hero-backdrop .hero-art-dark { display: none; }
.dark .hero-backdrop .hero-art-dark { display: block; }
.dark .hero-backdrop .hero-art-light { display: none; }
.hero-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 42% 78% at 50% 45%, #f8fafcc7 0%, #f8fafc99 48%, #f8fafc1f 85%, transparent 100%),
                linear-gradient(to top, #f8fafc, transparent 22%);
}
.dark .hero-backdrop::after {
    background: radial-gradient(ellipse 42% 78% at 50% 45%, #0f172ad6 0%, #0f172ab8 48%, #0f172a38 85%, transparent 100%),
                linear-gradient(to top, #0f172a, transparent 22%);
}
#hero-subtitle { color: #334155; }
.dark #hero-subtitle { color: #dbe6f3; }
.dark #hero-checks { color: #cbd5e1; }
#hero-checks { color: #334155; }
.cinematic-hero .section-wave path { fill: var(--page-surface); }
@media (max-width: 600px) {
    /* Give the full panorama room below the copy instead of fading it away. */
    #hero { padding-bottom: 250px; }
    .hero-backdrop picture { top: auto; bottom: 28px; height: auto; aspect-ratio: 1983 / 793; mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent); }
    .hero-backdrop img { object-fit: contain; object-position: center; }
    .hero-backdrop::after, .dark .hero-backdrop::after {
        background: linear-gradient(to top, var(--page-surface), transparent 12%);
    }
}
.site-nav.glass-panel {
    background: rgba(248, 250, 252, .9);
    border: 0;
    border-bottom: 1px solid var(--card-edge);
    backdrop-filter: blur(20px);
    box-shadow: 0 6px 28px rgba(0, 42, 59, .05);
}
.dark .site-nav.glass-panel { background: rgba(15, 23, 42, .9); }
.site-nav > div { max-width: 1480px; }
.site-nav .desktop-links { gap: 18px; margin-left: 28px; margin-right: 24px; }
.site-nav .desktop-links > * { margin-left: 0 !important; white-space: nowrap; }
.site-nav [data-i18n="nav.cameron.pre"] { white-space: nowrap; }
#mobileMenu { max-height: calc(100dvh - 64px); overflow-y: auto; background: var(--page-surface); }
#mobileMenu a { border-radius: 8px; padding-left: 12px; }
#mobileMenu a:hover { background: rgba(0, 140, 183, .08); }
.cinematic-section {
    isolation: isolate;
    background-color: var(--page-surface);
    background-image: radial-gradient(ellipse at 5% 5%, rgba(0, 140, 183, .07), transparent 44%), radial-gradient(ellipse at 95% 85%, rgba(122, 32, 159, .06), transparent 44%);
    padding-top: clamp(64px, 7vw, 104px);
    padding-bottom: clamp(72px, 8vw, 112px);
}
.cinematic-section:nth-of-type(odd) { background-color: var(--page-alternate); }
.dark .cinematic-section { background-color: var(--page-surface); }
.dark .cinematic-section:nth-of-type(odd) { background-color: var(--page-alternate); }
.cinematic-section > .max-w-7xl, .cinematic-section > .max-w-6xl, .cinematic-section > .max-w-4xl { position: relative; z-index: 2; }
.cinematic-section .section-wave { display: none; }
.cinematic-section + .cinematic-section { border-top: 1px solid var(--card-edge); }
.cinematic-section h2 {
    color: var(--heading-color);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    letter-spacing: -.035em;
    line-height: 1.18;
    text-wrap: balance;
}
.cinematic-section h2::before {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    margin: 0 auto 20px;
    border-radius: 99px;
    background: linear-gradient(90deg, #008CB7, #7A209F, #C21E72);
}
.cinematic-section p { line-height: 1.7; }
.cinematic-section p.text-slate-400, .cinematic-section p.text-slate-500, .cinematic-section p.text-slate-600,
.dark .cinematic-section p { color: var(--muted-color); }
.section-lede { max-width: 760px; margin-left: auto; margin-right: auto; font-weight: 400; text-wrap: pretty; }
.cinematic-section .cinematic-card {
    background: var(--card-surface);
    border: 1px solid var(--card-edge);
    border-radius: 22px;
    box-shadow: var(--card-shadow);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.dark .cinematic-section .cinematic-card { background: var(--card-surface); border-color: var(--card-edge); box-shadow: var(--card-shadow); }
.dark .cinematic-section p[class] { color: var(--muted-color); }
.cinematic-section .section-lede { font-weight: 400; }
.cinematic-section .media-frame { border-radius: 22px; }
[role="button"][tabindex]:focus-visible { outline: 3px solid #2dabc4; outline-offset: 5px; }
.cinematic-card:hover { border-color: rgba(45, 171, 196, .45); box-shadow: 0 20px 50px rgba(0, 112, 152, .12); }
.cinematic-section .cinematic-card:hover { border-color: rgba(45, 171, 196, .45); }
.media-frame { border-radius: 22px; border: 1px solid var(--card-edge); box-shadow: var(--card-shadow); overflow: hidden; }
.media-frame [class*="bg-opacity-90"] { background: rgba(15, 23, 42, .85); border: 1px solid rgba(98, 199, 218, .6); box-shadow: 0 0 36px rgba(0, 140, 183, .3); }
.media-frame .fa-play { color: #a1dfea; }
.chapter-part { margin-top: 64px; }
.chapter-part h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.025em; }
.chapter-part > .grid { gap: 24px; }
.chapter-card { padding: 24px; }
.chapter-card h4 { color: var(--heading-color); font-weight: 600; font-size: 1.03rem; line-height: 1.5; }
.chapter-card .aspect-\[16\/9\] { border-radius: 14px; border: 1px solid var(--card-edge); }
.chapter-card .flex.items-center.gap-4 { flex-wrap: wrap; gap: 10px 16px; padding: 4px 0; }
.chapter-card a.text-brand-600 { color: var(--link-color); }
.dark .cinematic-section a.text-brand-600 { color: var(--link-color); }
.chapter-card a.text-brand-600:hover { text-decoration: underline; text-underline-offset: 4px; }
.chapter-card .audio-container { margin-top: 4px; border: 1px solid var(--card-edge); background: rgba(0, 140, 183, .06); border-radius: 12px; }
.chapter-card audio { min-width: 0; }
.book-card { padding: 32px 28px; }
.book-card > .group { perspective: 1200px; }
.book-card > .group > .relative { border-radius: 14px; background: rgba(0, 140, 183, .04); border-color: var(--card-edge); transition: transform .4s ease; }
@media (hover: hover) { .book-card:hover > .group > .relative { transform: rotateY(-5deg) translateY(-4px); } }
.book-card h3 { letter-spacing: -.02em; }
.book-card a, .author-card > a { border-radius: 12px; color: var(--link-color); border-color: var(--card-edge); background: rgba(0, 140, 183, .06); }
.author-card { padding: 36px 28px; }
.author-card > img { width: 96px; height: 96px; border: 3px solid var(--page-surface); outline: 1px solid var(--card-edge); box-shadow: 0 0 30px rgba(0, 140, 183, .12); }
.author-card > a { margin-top: auto; }
.author-card > p:last-of-type { margin-bottom: 24px; }
#resourceGrid { gap: 24px; }
.resource-card { padding: 24px; display: flex; flex-direction: column; }
.resource-card p { font-size: .9rem; }
.resource-card h3 { font-size: 1.05rem; line-height: 1.45; letter-spacing: -.015em; }
.resource-card > a { margin-top: auto; padding-top: 8px; }
.resource-filter-pill { border: 1px solid var(--card-edge); box-shadow: 0 3px 12px rgba(0, 42, 59, .04); }
.dark .resource-filter-pill:not(.text-white) { background: rgba(19, 32, 51, .94); color: #b0bed0; }
#showMoreContainer button { background: var(--card-surface); border-color: var(--card-edge); border-radius: 12px; box-shadow: var(--card-shadow); }
.cinematic-footer { background: radial-gradient(ellipse at 0% 10%, rgba(0, 140, 183, .12), transparent 55%), radial-gradient(ellipse at 100% 80%, rgba(122, 32, 159, .12), transparent 50%), #0b1322; }
.cinematic-footer .footer-panel { background: rgba(19, 32, 51, .85); border: 1px solid rgba(98, 199, 218, .14); border-radius: 22px; padding: 32px; }
.cinematic-footer .text-slate-400 { color: #b0bed0; }
.cinematic-footer .text-slate-500 { color: #9aaac0; }
.cinematic-footer .footer-panel > .text-sm { max-width: none; }
#backToTopBtn { background: linear-gradient(135deg, #008CB7, #005a7a); border: 1px solid rgba(98, 199, 218, .45); box-shadow: 0 8px 30px rgba(0, 140, 183, .25); }
@media (max-width: 767px) {
    .chapter-card, .book-card, .author-card, .resource-card { padding: 22px; border-radius: 18px; }
    .cinematic-footer .footer-panel { padding: 24px; }
    .chapter-part > .flex > .flex { gap: 6px; }
    .chapter-part > .flex > .flex > .h-px { width: 16px; }
    .chapter-part > .flex { gap: 10px; }
    .book-card .h-\[500px\] { height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
    .cinematic-card, .book-card > .group > .relative { transition: none; }
    .book-card:hover > .group > .relative { transform: none; }
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
    html.scroll-smooth { scroll-behavior: auto; }
}