/* Research navigation refinements; Field Notes uses its own stylesheets. */

/* Make the research coordinates a route into a specific project. */
#coordinate-preview { min-height: 6rem; }
#home .coordinate-project-link {
    display: inline-flex; align-items: center; min-height: 44px;
    color: #f5f1e7; font: .7rem 'IBM Plex Mono', monospace;
    text-underline-offset: .4em;
}
#home .coordinate-project-link:hover { color: #e2b27c; }
#home .hero-observation a:focus-visible,
#home .hero-observation button:focus-visible { outline-color: #f5f1e7; }
#selected-projects:focus-visible { outline: 2px solid #214f3a; outline-offset: 4px; }
.carousel-controls { display: none; }

/* Read and browse project details without losing the page underneath. */
html.project-open { scroll-snap-type: none !important; }
.project-detail .project-content h1:focus { outline: none; }
.project-stepper {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
    border-top: 1px solid #cbd2c6; margin-top: 3.5rem; padding-top: 1.5rem;
}
.project-stepper button {
    display: block; background: transparent; border: 0;
    padding: 1rem 0; text-align: left; color: #214f3a; cursor: pointer;
}
.project-stepper button span { display: block; font: .65rem 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .7rem; }
.project-stepper button strong { display: block; font: 400 1.3rem/1.3 'Fraunces', serif; }
.project-stepper button:hover:not(:disabled) strong { text-decoration: underline; text-underline-offset: .2em; }
.project-stepper button:disabled { color: #697068; opacity: .65; cursor: default; }
.project-photo-figure { margin: 2.5rem 0 3rem; }
.project-photo-figure--lead { margin-top: 1.5rem; }
.project-photo-figure--lead img { aspect-ratio: 16 / 9; height: auto; object-position: 50% 65%; }
.project-photo-figure img {
    display: block; width: 100%; height: auto; aspect-ratio: 1204 / 678;
    object-fit: cover; border: 1px solid #c5cebd;
}
.project-photo-figure figcaption {
    display: flex; justify-content: space-between; gap: 1.5rem;
    padding-top: .75rem; color: #5b685d; font: .72rem/1.55 'IBM Plex Mono', monospace;
}
.project-photo-figure figcaption span { color: #315944; text-transform: uppercase; letter-spacing: .055em; }
#projects .projects-grid.is-filtered { grid-auto-flow: row; }
#projects .projects-grid.is-filtered .project-card { grid-column: span 6; }

/* Keep the chapter composition, but never pull vertical scrolling to a snap point. */
html.home-chapters, html.home-chapters body { scroll-snap-type: none; }
#home .home-research.reveal, #home .editorial-about.reveal {
    opacity: 1; transform: none; transition: none; will-change: auto;
}
html.home-chapters #home .editorial-about-photo { transition: none; }

/* Static color field + an overscanned grid: depth without repainting gradients. */
#home .editorial-hero::before {
    background: linear-gradient(135deg, #f3f0e7 0%, #e8eee8 58%, #f1eadf 120%);
}
#home .hero-depth-grid {
    position: absolute; left: 50%; top: 0; width: 100vw; height: 100%;
    transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: -1;
}
#home .hero-depth-grid::before {
    content: ''; position: absolute; inset: -80px 0;
    background-image: linear-gradient(rgba(33,79,58,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(33,79,58,.04) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: translate3d(0, var(--cover-depth-y, 0px), 0);
}
#home .hero-observation { transform: translate3d(0, var(--panel-depth-y, 0px), 0); transition: none; }
/* Keep hover displacement and scrolling depth on separate axes of the same transform. */
#home .editorial-project .fingerprint,
#home .editorial-project.is-pointer-active .fingerprint {
    transform: translate3d(var(--shift-x, 0px), calc(var(--shift-y, 0px) + var(--research-depth-y, 0px)), 0);
    transition: opacity .25s ease;
}
@media (prefers-reduced-motion: no-preference) {
    html.home-chapters #home .hero-depth-grid::before,
    html.home-chapters #home .hero-observation,
    html.home-chapters #home .editorial-project .fingerprint,
    html.home-chapters #home .editorial-about-photo { will-change: transform; }
}
@media (max-width: 980px) {
    html.home-chapters #home .editorial-projects { scroll-snap-type: x mandatory; scroll-padding: 0; padding-right: 1rem; }
    html.home-chapters #home .editorial-project { scroll-snap-align: start; }
    .carousel-controls {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; margin-top: 1rem;
    }
    .carousel-controls button { min-height: 44px; padding: .5rem .75rem; background: transparent; border: 1px solid #9cae9d; color: #214f3a; font: .72rem 'Inter', sans-serif; cursor: pointer; }
    .carousel-controls button:disabled { opacity: .45; cursor: default; }
    .carousel-controls button:hover:not(:disabled) { background: #dce5dd; }
    .carousel-controls span { color: #59665e; font: .7rem 'IBM Plex Mono', monospace; }
}
@media (max-width: 600px) {
    .project-stepper { gap: 1.1rem; }
    .project-stepper button strong { font-size: 1.05rem; }
    .project-photo-figure figcaption { display: block; }
    .project-photo-figure figcaption span { display: block; margin-bottom: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
    html.home-chapters { scroll-snap-type: none; scroll-behavior: auto; }
    #home .editorial-projects { scroll-behavior: auto; }
    #home .hero-depth-grid::before, #home .hero-observation,
    #home .editorial-project .fingerprint, #home .editorial-project.is-pointer-active .fingerprint,
    html.home-chapters #home .editorial-about-photo { transform: none; will-change: auto; }
}