/* Progressive enhancement: the original CMS card markup stays intact. */
#projects.projects-carousel {
  height:auto; min-height:0; display:block; overflow:hidden;
  padding:clamp(42px,5.5vh,76px) 0 40px;
  background:#faf9f6;
  scroll-margin-top:0;
}
#projects.projects-carousel > header {
  width:min(88vw,1680px); margin:0 auto; padding:0 0 32px;
  grid-template-columns:1.12fr .88fr; gap:8vw; align-items:start;
}
#projects.projects-carousel > header h2 {margin:10px 0 0;font-size:clamp(40px,3.7vw,62px);line-height:1.25;}
#projects.projects-carousel > header > div:last-child {max-width:540px; justify-self:end;}
#projects.projects-carousel > header > div:last-child p {margin:0 0 20px; font-size:clamp(16px,1.2vw,20px)!important;line-height:1.8!important;}
#projects.projects-carousel #project-grid {
  position:relative; display:block; flex:none; width:min(92vw,1780px);
  height:clamp(355px,51vh,600px); min-height:0; margin:0 auto;
  border-radius:0; overflow:visible; background:transparent;
  touch-action:pan-y pinch-zoom; user-select:none; cursor:grab;
}
#projects.projects-carousel #project-grid.is-dragging {cursor:grabbing;}
#projects.projects-carousel #project-grid.is-dragging .project {transition:none;cursor:grabbing;}
#projects.projects-carousel #project-grid .project {
  position:absolute; left:50%; bottom:0; top:auto; display:block;
  width:var(--carousel-card-width); height:var(--carousel-card-height);
  min-height:0; aspect-ratio:auto; margin:0; grid-column:auto;
  border-radius:16px; transform-origin:center bottom;
  transform:translateX(calc(-50% + var(--carousel-x) + var(--carousel-drag, 0px))) scale(var(--carousel-scale));
  transition:transform 600ms cubic-bezier(.4,0,.2,1), opacity 400ms ease, filter 600ms ease;
  opacity:1; filter:brightness(.72); box-shadow:0 8px 28px #24251f18;
  text-decoration:none; outline-offset:4px; cursor:pointer;
}
#projects.projects-carousel #project-grid .project[data-active="true"] {filter:brightness(1);}
#projects.projects-carousel #project-grid .project[data-visible="false"] {opacity:0; pointer-events:none;}
#projects.projects-carousel #project-grid .project:before {
  inset:0; background-image:var(--project-image); background-size:cover;
  background-position:center; transform:none; filter:none; transition:none;
}
#projects.projects-carousel #project-grid .project:after,
#projects.projects-carousel #project-grid .project:hover:after {
  background:linear-gradient(180deg,#12171312 0%,transparent 34%,#12171330 56%,#121713db 100%);
  transition:none;
}
#projects.projects-carousel #project-grid .project-info {
  left:26px; right:24px; bottom:30px; transform:none; opacity:0; transition:opacity 300ms ease;
}
#projects.projects-carousel #project-grid .project[data-active="true"] .project-info {opacity:1;}
#projects.projects-carousel #project-grid .project-info h3 {
  font-size:clamp(23px,2.1vw,35px); font-weight:500; line-height:1.3;
  color:white; margin:0 0 9px; overflow-wrap:normal;
}
#projects.projects-carousel #project-grid .project-info p {
  font-size:clamp(13px,.98vw,16px)!important; line-height:1.6!important;
  color:#ffffffe8; margin:0;
}
#projects.projects-carousel .projects-carousel-card-arrow {
  position:absolute; top:20px; right:20px; display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:1px solid #ffffffb3; border-radius:50%;
  background:#14191420; color:#fff; padding:0; opacity:0;
  transform:none; font-size:20px; text-shadow:none; transition:opacity 350ms ease;
}
#projects.projects-carousel .project[data-active="true"] .projects-carousel-card-arrow {opacity:1;}
#projects.projects-carousel svg {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
#projects.projects-carousel .projects-carousel-controls {
  position:relative; display:flex; align-items:center; justify-content:center; gap:20px;
  width:min(88vw,1680px); margin:26px auto 0;
}
#projects.projects-carousel .projects-carousel-arrow {
  display:grid; place-items:center; flex:0 0 46px; width:46px; height:46px;
  padding:0; border:1px solid #bca99a; border-radius:50%; color:#685c50;
  background:#fff; cursor:pointer; transition:background 180ms ease,color 180ms ease;
}
#projects.projects-carousel .projects-carousel-arrow:hover {background:#bca99a;color:white;}
#projects.projects-carousel .projects-carousel-pagination {display:flex;align-items:center;gap:0;max-width:320px;overflow-x:auto;scrollbar-width:none;padding:4px;}
#projects.projects-carousel .projects-carousel-pagination::-webkit-scrollbar {display:none;}
#projects.projects-carousel .projects-carousel-pagination button {
  width:28px;flex:0 0 28px;height:44px;background:transparent;border:0;padding:0;display:grid;place-items:center;cursor:pointer;
}
#projects.projects-carousel .projects-carousel-pagination button:before {
  content:""; display:block; width:6px; height:6px; border-radius:9px; background:#d7cfc6;
  transition:width 250ms ease,background 250ms ease;
}
#projects.projects-carousel .projects-carousel-pagination button[aria-current="true"]:before {width:23px;background:#a39381;}
#projects.projects-carousel .projects-carousel-counter {font-size:12px;letter-spacing:.12em;color:#766b60;font-variant-numeric:tabular-nums;}
#projects.projects-carousel .projects-carousel-play {display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;background:transparent;color:#766b60;border:0;padding:0;border-radius:50%;cursor:pointer;}
#projects.projects-carousel .projects-carousel-play[hidden] {display:none;}
#projects.projects-carousel .projects-carousel-play:hover {background:#ebe5de;}
#projects.projects-carousel .projects-carousel-play svg {width:18px;height:18px;}
#projects.projects-carousel .project:focus-visible,
#projects.projects-carousel button:focus-visible {outline:2px solid #766653;outline-offset:4px;}
#projects.projects-carousel .projects-carousel-status {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#projects.projects-carousel.is-reduced-motion #project-grid .project,
#projects.projects-carousel.is-reduced-motion button:before {transition:none;}
@media(min-width:761px) and (max-height:740px) {
  #projects.projects-carousel {padding-top:30px;padding-bottom:26px;}
  #projects.projects-carousel > header {padding-bottom:22px;}
  #projects.projects-carousel #project-grid {height:clamp(310px,48vh,355px);}
  #projects.projects-carousel .projects-carousel-controls {margin-top:20px;}
}
@media(max-width:760px) {
  #projects.projects-carousel {padding:42px 0 32px;scroll-margin-top:0;}
  #projects.projects-carousel > header {width:auto;margin:0 24px;padding:0 0 28px;grid-template-columns:1fr;gap:18px;}
  #projects.projects-carousel > header > div:last-child {justify-self:start;max-width:none;}
  #projects.projects-carousel > header > div:last-child p {font-size:15px;line-height:1.75;margin-bottom:16px;}
  #projects.projects-carousel > header h2 {font-size:34px;}
  #projects.projects-carousel #project-grid {width:100%;height:clamp(340px,49vh,470px);}
  #projects.projects-carousel #project-grid .project {border-radius:13px;}
  #projects.projects-carousel #project-grid .project-info {left:22px;right:22px;bottom:27px;}
  #projects.projects-carousel #project-grid .project-info h3 {font-size:26px;}
  #projects.projects-carousel #project-grid .project-info p {font-size:13px!important;}
  #projects.projects-carousel .projects-carousel-controls {width:calc(100% - 32px);gap:8px;margin-top:20px;}
  #projects.projects-carousel .projects-carousel-pagination {max-width:calc(100vw - 202px);}
  #projects.projects-carousel .projects-carousel-pagination button {width:25px;flex-basis:25px;}
  #projects.projects-carousel .projects-carousel-counter {display:none;}
  #projects.projects-carousel .projects-carousel-card-arrow {top:18px;right:18px;}
}
@media(prefers-reduced-motion:reduce) {
  #projects.projects-carousel #project-grid .project,
  #projects.projects-carousel .projects-carousel-pagination button:before {transition:none;}
}