/* Project boxes stay fixed while only their inner content scales. */
.project-card { display: block; min-width: 0; }
.project-media { position: relative; aspect-ratio: 517 / 306; overflow: hidden; background: var(--color-stage); border-radius:var(--card-radius); }
.project-media__inner { position: absolute; inset: 0; display: grid; place-items: center; transition: transform 700ms var(--ease-smooth); }
.project-card:is(:hover, :focus-visible) .project-media__inner { transform: scale(1.035); }
.project-card--designarchiv .project-media { aspect-ratio: 1072 / 485; }
.project-card__category { font-family:Inter,Arial,Helvetica,sans-serif; font-size:clamp(24px,2.5vw,32px); font-weight:600; letter-spacing:-.035em; line-height:1.15; margin:24px 0 9px; }
.project-card__name { font-family:Inter,Arial,Helvetica,sans-serif; color:var(--color-muted); font-size:clamp(13px,1.2vw,15px); font-weight:400; letter-spacing:-.01em; margin:0; line-height:1.5; }
.project-card--posters .project-media { aspect-ratio:517 / 270; background: var(--color-inset); box-shadow: inset 0 7px 30px rgb(0 0 0 / .035), inset 0 0 34px rgb(0 0 0 / .025); }
.project-card--3d { --model-background:#3b3b3b; }
.project-card--3d .project-media { background:var(--model-background); }
.source-artboard { position: relative; container-type: inline-size; width: 100%; overflow: hidden; flex: none; }
.source-artboard > * { position: absolute; margin: 0; border: 0; }
.source-artboard img { max-width: none; }
.source-artboard .source-sketch { box-shadow: 0 4px 18px rgb(0 0 0 / .06); border: 0; }
.source-text { white-space: pre; line-height: 1; font-family: Arial, Helvetica, sans-serif; }
.source-copy-block { white-space: pre; font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
.project-media__inner > .source-artboard { width: 100%; max-height: 100%; }
.project-card--gipfelglueck .project-media__inner > .source-artboard { width: auto; height: 100%; }
.device-stage { position: relative; width: 100%; aspect-ratio: 1072 / 485; background: var(--color-stage); overflow: hidden; }
.device-group { position: absolute; }
.device-group img { position: absolute; max-width: none; object-fit: fill; }
.web-carousel { display: flex; position: absolute; inset: 0; width: 300%; height: 100%; animation: web-slides 8s infinite var(--ease-smooth); }
.web-carousel__slide { flex: 0 0 33.333333%; height: 100%; position: relative; }
.poster-preview__image { position: absolute; top: 0; left: 50%; object-fit: fill; filter: drop-shadow(1px 3px 7px rgb(0 0 0 / .12)); }
@keyframes web-slides { 0%, 38% { transform: translateX(0); } 50%, 88% { transform: translateX(-33.333333%); } 100% { transform: translateX(-66.666667%); } }
@media (max-width:700px) { .project-card__category { font-size:24px; margin-top:18px; } }

/* The original laptop and mobile artwork stay intact beneath an updated desktop screen. */
.device-desktop { position:absolute; }
.device-desktop--routinely .device-desktop__screen { position:absolute; left:20%; top:22.4%; width:66.1%; height:60.3%; object-fit:fill; background:#111; border-radius:2.2% 2.2% 0 0; }
.device-desktop--routinely::after { content:''; position:absolute; left:49.2%; top:22.4%; width:8%; height:2.4%; background:#090909; border-radius:0 0 8px 8px; pointer-events:none; }



/* Match the magazine stage to the centered composition without extra letterboxing. */
.project-card--klang .project-media { aspect-ratio:1.85 / 1; }
/* The magazine's own background fills the complete card; no added gray band. */
.project-card--klang .project-media { background:transparent; }
.project-card--klang .project-media__inner > .source-artboard { width:100%; height:100%; max-height:none; }

/* Fit the source composition to the shared card height without clipping the cover. */
.project-card--klang .source-artboard img { left:-7% !important; top:-19% !important; width:114% !important; height:auto !important; object-fit:contain; }
/* Shared model composition preserves the original bitmap proportions. */
.model-composition { position:relative; width:100%; aspect-ratio:517 / 306; overflow:hidden; background:#3b3b3b; }
.model-composition img { position:absolute; left:54%; top:0; width:auto; max-width:none; height:100%; transform:translateX(-50%); clip-path:inset(0 1px); }
.project-card--3d .project-media__inner > .model-composition { position:absolute; inset:0; height:100%; }

@media(max-width:700px) {
  .project-card--designarchiv .project-media { aspect-ratio:1072 / 650; }
  .project-card--designarchiv .device-group { height:auto!important; top:50%!important; translate:0 -50%; scale:1.3; transform-origin:center center; }
  .project-card--deto .project-media { aspect-ratio:517 / 280; }
  .project-card--deto .source-artboard { position:absolute; width:100%!important; height:auto!important; max-height:none; top:auto; bottom:0; }
}

@media(max-width:700px) { .project-card__name { font-size:14px; } }

/* A shallower desktop stage keeps the packaging preview in balance with adjacent work. */
@media(min-width:1025px) { .project-card--deto .project-media { aspect-ratio:517 / 250; } }