/* Warm ink and orange connect this digital field to the welcome illustration. */
.projects-carousel {
    background: #211c18;
    color: #fff8ec;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    border-top: 1px solid #ff952540;
}
.projects-pixels { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.projects-carousel__heading { position: relative; width: fit-content; margin-inline: auto; }
.projects-carousel__heading h2 { font-size: clamp(48px, 7vw, 84px); font-weight: 800; line-height: 1.1; letter-spacing: -.055em; }
.projects-carousel__eyebrow { color: #ffb66b; }
.projects-pixel-letter { display: inline-block; transform: translateY(var(--letter-y, 0px)); color: var(--letter-color, inherit); text-shadow: var(--letter-shadow, none); transition: transform 180ms ease-out, color 180ms ease-out, text-shadow 180ms ease-out; }
.projects-carousel__card { border-radius: 6px; border-color: #fff4df30; transition: border-color 220ms ease-out, box-shadow 220ms ease-out; }
.projects-carousel__card::after { content: ''; position: absolute; inset: 10px; pointer-events: none; opacity: 0; background: linear-gradient(#ffb66b, #ffb66b) top left / 24px 2px no-repeat, linear-gradient(#ffb66b, #ffb66b) top left / 2px 24px no-repeat, linear-gradient(#ffb66b, #ffb66b) bottom right / 24px 2px no-repeat, linear-gradient(#ffb66b, #ffb66b) bottom right / 2px 24px no-repeat; transition: opacity 180ms ease-out; }
.projects-carousel__card.is-active:hover, .projects-carousel__card:focus-within { border-color: #ffb66b; box-shadow: 0 0 0 4px #ff952518, 0 22px 60px #0008; }
.projects-carousel__card.is-active:hover::after, .projects-carousel__card:focus-within::after { opacity: 1; }
.projects-carousel__preview { transform: translate(var(--image-x, 0px), var(--image-y, 0px)) scale(var(--image-scale, 1)); transition: transform 280ms cubic-bezier(.2,0,0,1); }
.projects-carousel__info { transform: translate(var(--info-x, 0px), var(--info-y, 0px)); transition: transform 220ms cubic-bezier(.2,0,0,1); }
.projects-carousel__open { color: #fff8ec; transition: color 150ms ease-out, background 150ms ease-out, padding 180ms ease-out; }
.projects-carousel__open:hover, .projects-carousel__open:focus-visible { color: #211c18; background: #ffb66b; padding-inline: 12px; border-color: #ffb66b; }
.projects-carousel__position { color: #d6bea7; }
.projects-carousel__arrows button { border-radius: 4px; box-shadow: 3px 3px 0 #ff952533; transition: transform 150ms ease-out, background 150ms ease-out; }
.projects-carousel__arrows button:hover:not(:disabled) { transform: translate(-2px, -2px); background: #ffbf7a; }
@media (max-width: 640px) {
    .projects-carousel.is-enhanced .projects-carousel__stage { height: 465px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .projects-carousel.has-pixel-field, .projects-carousel.has-pixel-field * {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='36' viewBox='0 0 16 18'%3E%3Cpath fill='%23211c18' d='M0 0h3v2h2v2h2v2h2v2h2v2h2v3H9v2h2v3H7v-3H5v-3H3v2H0z'/%3E%3Cpath fill='%23ffb66b' d='M1 1h1v2h2v2h2v2h2v2h2v2H7v3h2v3H8v-3H6v-3H4v1H2v1H1z'/%3E%3C/svg%3E") 2 2, auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .projects-carousel .projects-pixel-letter, .projects-carousel .projects-carousel__preview, .projects-carousel .projects-carousel__info { transform: none; transition: none; }
    .projects-carousel .projects-carousel__card, .projects-carousel .projects-carousel__open, .projects-carousel .projects-carousel__arrows button { transition: none; }
    .projects-carousel__arrows button:hover:not(:disabled) { transform: none; }
}