/* A lightweight, progressively enhanced filmstrip for the featured project. */
.realizations-section { overflow: clip; }
.project-heading { display: flex; justify-content: space-between; align-items: end; gap: 26px; padding: 22px 0 26px; border-top: 1px solid var(--line); }
.project-heading__title { min-width: 0; }
.project-heading__index { color: var(--wood); font-size: 10px; font-weight: 650; letter-spacing: .12em; }
.project-heading h3 { margin: 12px 0 0; font-size: clamp(22px, 2.4vw, 31px); font-weight: 550; line-height: 1.25; letter-spacing: -.035em; text-wrap: balance; }
.project-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; flex: none; gap: 8px; list-style: none; padding: 0; margin: 0; }
.project-tags li { padding: 7px 11px; border: 1px solid #d9ddd2; border-radius: 999px; color: #69725f; font-size: 10px; white-space: nowrap; }
.project-carousel { position: relative; min-width: 0; }
.project-carousel__track.gallery-grid { display: flex; gap: 18px; overflow: auto hidden; padding: 0 0 5px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.project-carousel__track::-webkit-scrollbar { display: none; }
.project-carousel__track:focus-visible { outline-offset: 7px; }
.project-carousel__track.is-draggable { cursor: grab; }
.project-carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.project-carousel__track.is-dragging a { cursor: grabbing; }
.project-slide { flex: 0 0 calc((100% - 52px) / 3.12); min-width: 0; margin: 0; scroll-snap-align: start; }
.project-slide__photo { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: #e3e0d6; -webkit-user-drag: none; }
.project-slide__photo::after { content: ""; position: absolute; inset: 50% 0 0; pointer-events: none; background: linear-gradient(transparent, #151c1630); }
.project-slide__photo > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; user-select: none; -webkit-user-drag: none; }
.project-slide__photo:hover > img { transform: scale(1.025); }
.is-dragging .project-slide__photo > img { transform: none; }
.project-slide__expand { position: absolute; z-index: 1; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #ffffff70; border-radius: 999px; background: #f8f7f0ed; color: #30382c; box-shadow: 0 3px 16px #14200f14; font-size: 10px; font-weight: 600; transition: background .2s; }
.project-slide__expand svg { width: 15px; height: 15px; }
.project-slide__photo:hover .project-slide__expand { background: #fff; }
.project-slide figcaption { display: flex; gap: 13px; align-items: baseline; padding: 15px 1px 10px; color: #505b48; font-size: 12px; }
.project-slide__number { color: #8c917f; font-size: 10px; font-variant-numeric: tabular-nums; }
.project-carousel__footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin: 19px 0 23px; }
.project-carousel__hint { display: flex; align-items: center; gap: 11px; color: #7a8070; font-size: 11px; }
.project-carousel__hint > span { font-size: 24px; font-weight: 300; color: #8e9a81; }
.project-carousel__navigation { display: flex; align-items: center; gap: 9px; }
.project-carousel__range { margin-right: 10px; color: #78806f; font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.carousel-arrow { display: grid; place-items: center; flex: none; width: 45px; height: 45px; padding: 10px; border: 1px solid #cbd1c1; border-radius: 50%; background: transparent; color: #35452d; cursor: pointer; transition: background .2s, border-color .2s; }
.carousel-arrow svg { width: 22px; height: 22px; }
.carousel-arrow:hover:not(:disabled) { background: #e5eadd; border-color: #8e9f7e; }
.carousel-arrow:disabled { opacity: .3; cursor: default; }
.project-open-link { display: inline-flex; align-items: center; gap: 13px; min-height: 45px; margin-left: 9px; padding: 0 19px; border-radius: 999px; border: 1px solid #263925; background: #263925; color: #fff; font-size: 11px; font-weight: 550; }
.project-open-link:hover { background: #40543a; }
.project-open-link svg { width: 17px; height: 17px; }
.project-carousel__progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 2px; border: 0; border-radius: 99px; overflow: hidden; background: #dfe3d6; color: #8f9c7f; }
.project-carousel__progress::-webkit-progress-bar { background: #dfe3d6; }
.project-carousel__progress::-webkit-progress-value { background: #8f9c7f; }
.project-carousel__progress::-moz-progress-bar { background: #8f9c7f; }
@media (max-width: 1100px) {
  .project-heading { align-items: start; }
  .project-tags { gap: 6px; }
  .project-tags li { padding: 7px 9px; }
  .project-slide { flex-basis: calc((100% - 30px) / 2.25); }
}
@media (max-width: 680px) {
  .project-heading { display: block; padding-top: 23px; padding-bottom: 23px; }
  .project-heading h3 { font-size: 25px; max-width: 330px; }
  .project-tags { justify-content: flex-start; margin-top: 17px; gap: 7px; }
  .project-slide { flex-basis: 82%; }
  .project-carousel__track.gallery-grid { gap: 13px; }
  .project-slide__photo { border-radius: 8px; }
  .project-slide figcaption { font-size: 11px; padding-top: 13px; }
  .project-slide__expand { right: 11px; bottom: 11px; }
  .project-carousel__footer { align-items: start; flex-direction: column; gap: 13px; margin-top: 13px; }
  .project-carousel__navigation { width: 100%; }
  .project-carousel__range { margin-right: auto; font-size: 10px; }
  .project-open-link { margin-left: 4px; padding: 0 14px; gap: 9px; font-size: 10px; }
  .carousel-arrow { width: 42px; height: 42px; padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-slide__photo > img, .project-slide__expand, .carousel-arrow { transition: none; }
}