/* Homepage layout only; shared colors and components live in site.css. */
.home .page {
    position: relative;
    background: linear-gradient(
        to bottom,
        var(--gray-100) 0%, var(--gray-100) 8%, #e6e9ed 15%,
        #cdd3da 22%, #aeb6c0 29%, #8b939f 37%, #6a727e 45%,
        #4c535d 53%, #333941 61%, #1e232a 69%, #0a0a0a 79%
    );
}
.home .upper { position: relative; z-index: 2; padding-bottom: 2rem; }
.home .container { max-width: 1080px; padding: 1.5rem 2rem 0; }
.home .header { max-width: 1200px; margin: 0 auto; }
.home .hero-text { min-width: 0; padding-right: 1rem; }
.home .block { margin-bottom: 3rem; }
.home .work, .home .dashboards { list-style: none; display: grid; gap: 1rem; }
.home .dashboards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home .panel, .home .worklead-panel, .home details.workcat > summary {
    padding: 1.25rem 1.5rem;
}
.home .panel .links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.home .panel p { color: var(--gray-800); font-size: 1rem; line-height: 1.65; }
.home .work p { max-width: 70ch; }
.home .work h3, .home .dashboards h3 {
    font-size: 1.15rem; font-weight: 600; margin-bottom: .5rem; line-height: 1.4;
}
.home a.panel {
    display: block; height: 100%; text-decoration: none;
    color: var(--gray-800); transition: border-color .2s;
}
.home a.panel h3::after { content: " \2197"; color: var(--primary-dark); }
.home a.panel:hover { border-color: var(--primary); }
.home a.panel:hover h3 { text-decoration: underline; text-underline-offset: .15em; }
.home a:focus-visible, .home summary:focus-visible {
    outline: 3px solid var(--primary); outline-offset: 3px;
}
.home .worklead-panel { margin-bottom: 1rem; }
.home .worklead-panel h2 { margin-bottom: .5rem; }
.home .worklead { color: var(--gray-800); font-size: 1rem; line-height: 1.65; }
.home details.workcat { margin-top: .75rem; }
.home details.workcat > summary {
    cursor: pointer; list-style: none; color: var(--gray-800);
    font-size: 1rem; font-weight: 600; line-height: 1.5;
}
.home details.workcat > summary::-webkit-details-marker { display: none; }
.home details.workcat > summary::before { content: "\25B8"; display: inline-block; width: 1.2em; }
.home details.workcat[open] > summary::before { transform: rotate(90deg); }
.home details.workcat > summary:hover { border-color: var(--primary); }
.home .count { color: var(--gray-600); font-weight: 400; margin-left: .5rem; }
.home details.workcat > ul.work { margin-top: .75rem; }
/* Restore the original forest overhang behind the translucent reading panels.
 * The upper stacking context keeps those panels interactive above the scene. */
.home #forest-band {
    position: relative; z-index: 1; margin-top: -40px;
    height: 458px; overflow: visible;
}
.home #backdrop {
    position: absolute; left: 0; right: 0; bottom: 0;
    width: 100%; height: 1360px; border: 0;
    mask-image: linear-gradient(
        to bottom, transparent 0%, rgba(0, 0, 0, .12) 40%,
        rgba(0, 0, 0, .42) 64%, rgba(0, 0, 0, .80) 82%, #000 92%, #000 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom, transparent 0%, rgba(0, 0, 0, .12) 40%,
        rgba(0, 0, 0, .42) 64%, rgba(0, 0, 0, .80) 82%, #000 92%, #000 100%
    );
}
.home .forest-caption {
    text-align: center; font-size: .85rem; line-height: 1.6;
    color: #8b8b8b; padding: .9rem 2rem 1.2rem;
}
.home .forest-caption a { color: #b9c7d4; }
@media (prefers-reduced-motion: reduce) {
    .home a.panel { transition: none; }
}